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:


<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><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>


/* 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;
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;}
padding:5px 5px;
.absolute-text a{


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 *