Pure CSS Image Gallery with Thumbnails

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 which allows you to change the main image when user hover over the thumbnails.

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

We will make this with HTML and CSS3 only.

I will 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. It 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 data HTML5 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 CSS only Gallery while Hover Thumbnail

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.

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

How to Style 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 gallery into your website.

Code ExamplesYou May Also Like