HTML Gallery or Slideshow?

Lesson 1: Look for what’s not there, and don’t be afraid to move on.

There are many many many coding languages. While I am only working with CSS and HTML right now, I have tried to use Java, and I know there are many more out there. The thing about building a website, all of the code languages tie in together.

If you are looking to insert a slideshow, just know that you will most likely need a Java file for the interactions of the piece. I spent hours trying to edit a slide show, with code in each of my language files, and I was getting no where. I finally reached a point where I said this is not working any more, and I decided to delete the code that I had been working on for days. But that’s what we do: we build, we inspect, and we fix. It’s a cycle. I hope that for you, everything works out perfectly the first time around. But like I said above, do not be afraid to move on from something that isn’t working.

So after I deleted the code, I decided why not have a gallery of pictures instead!

<– This is what my gallery looked like, cool right?

Here’s the code:

/*HTML CODE*/

<div class=”gallery cf”>
<div><img src=”Images/Island Inn.jpg”><p class=”absolute-text”>Ann Marie’s</a> </p></div>
<div><img src=”Images/island.jpg”><p class=”absolute-text”>Island Life</a> </p></div>
<div><img src=”Images/Lake Erie Grocery Store.jpg”><p class=”absolute-text”>Around Town</a> </p></div>
<div><img src=”Images/night.jpg”><p class=”absolute-text”>Anacortes at Night</a> </p></div>
<div><img src=”Images/san juan island ferry.jpg”><p class=”absolute-text”>Ferry to the San Juan’s</a> </p>
</div>
<div><img src=”Images/Deception Pass Bridge.jpg”><p class=”absolute-text”>Deception Pass</a> </p></div>
<div><img src=”Images/park.jpg”><p class=”absolute-text”>Local Parks</a> </p></div>
<div><img src=”Images/rainbor.jpg”><p class=”absolute-text”>Rainbow</a> </p></div>
<div><img src=”Images/sunset.jpg”><p class=”absolute-text”>Sunset</a> </p></div>
<div><img src=”Images/boats.jpg”><p class=”absolute-text”>Cap Sante Marina</a> </p></div>
<div><img src=”Images/water.jpg”><p class=”absolute-text”>View From the Water</a> </p></div>
<div><img src=”Images/rocks.jpg”><p class=”absolute-text”>Rock Hunting</a> </p></div>
</div>

/*CSS CODE*/

/* Start Gallery*/
* {
box-sizing: border-box;
}

.gallery {
width: 600px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.gallery > div {
position: relative;
float: left;
padding: 5px;
}

.gallery > div > img {
display: block;
height:100px;
width: 150px;
transition: .1s transform;
transform: translateZ(0); /* hack */
}

.gallery > div:hover {
z-index: 1;
}

.gallery > div:hover > img {
transform: scale(3,3);
transition: .3s transform;
}

.cf:before, .cf:after {
display: table;
content: “”;
line-height: 0;
}

.cf:after {
clear: both;
}
/*text on images*/
.relative{position:relative; width:200px;}
.absolute-text{
position:absolute;
top:0;
font-size:12px;
font-family:”vedana”;
background:rgba(251,251,251,0.4);
padding:5px 5px;
width:100%;
text-align:center;
}
.absolute-text a{
font-size:12px;
color:#b92b27;
}

/*END CODE*/

Thankful to whoever created this, sorry I don’t remember where I picked it up from. I will try to be better about that from now on.

To get rid of the text over the images, delete “<p class=”absolute-text”>Ann Marie’s</a> </p>: this part of the code, and the CSS code below /*text on images*/

I used images with a width of 150px and a height of 100px.

Hope you like it, email me with any questions!

The Code Damsel

Leave a Reply

Your email address will not be published. Required fields are marked *