Pure CSS Image Gallery with Thumbnails

Did you try out our fullscreen image gallery which build with CSS3? What about this Pure CSS image gallery with thumbnails that allows you to change the main image when user hover over the thumbnails.

Previously, I have build a great looking Simple CSS Image Gallery that has awesome design interface too. But here, I’m going to share a responsive thumbnails gallery which hasn’t a slider but allow to change the main image when user hover a thumbnail.

Besides this, I’ll provide you code and example demo so you can quickly implement and get the idea of how it works.

It is flexible, responsive and customizable image gallery that optimized for both mobile and desktop web browsers. It also allows to show a caption on the pictures, and you can add the caption by simple defining the HTML5 data  attribute.

You can also implement it by adding a few lines of HTML and CSS code, and we will guide you on how to do that.

Build Basic HTML for Gallery & Thumbnails

The HTML looks like nothing but only have a gallery div define with three of its child divs. The child divs are used to handle both the main image and thumbnails.  So, the basic HTML structure for gallery looks like below:

<div class="gallery">
  <div class="thumb lasagna" data-caption="lasagna"></div>
  <div class="thumb girl" data-caption="cute girl"></div>
  <div class="thumb rabbit" data-caption="rabbit eat grass?"></div>
</div>

Did you notice that each child div has a class name thumb but also have different classes? Like the class name lasagna will be used to define the image in the CSS. Similar we will do the same for girl and rabbit.

We use a data-caption “thml5" attribute to define the caption which will show on over the image. That’s it about HTML and Now the CSS.

CSS for Image Gallery

The Gallery need to set the position relative and then need the opacity 0.7 on hover.

.gallery {
  position: relative;
}
.gallery:hover .thumb {
  opacity: .7;
}

Thumb need width and height, and we do define the height to 100px whereas the width in percentage, and it will be 12.5%.

.thumb {
  height: 100px;
  width: 12.5%;
  background: no-repeat center center;
  background-size: cover;
  transition: opacity 600ms;  
}

The policy will change on hover the thumb, and then it will be 1

.gallery .thumb:hover {
  opacity: 1; /* overrides blur, so active img is not blurred */
}

We do use the :after and :before with thumbnails to set the opacity 0 to hide. We do need to play more with both: after and: before which, you can find in the demo.

.thumb:before, .thumb:after { 
  opacity: 0; 
  width: 45%;
}

In the end, we will define the images, and we can easily do like this way.

.thumb.lasagna {
  background-image: url(https://cdn.pixabay.com/photo/2016/12/11/22/41/lasagna-1900529_960_720.jpg);
}

That’s finished! Now you can go ahead and implement this pure CSS image & thumbnails gallery into your website.

You Might Be Interested In: