Pure CSS Image Gallery with Thumbnails

Author
In CSS Tutorial, Slideshow Last updated Jan 23, 2017
Pure CSS Image Gallery with Thumbnails

In this article, I will tech you how to create Pure CSS Image Gallery with Thumbnails which allows you to change the main image on hover over the thumbnails. Two years back, we have created CSS3 Fullscreen Image Gallery Without Javascript which looks like a slideshow.

Pure CSS Image Gallery with thumbnails

But today we plan to share you a thumbnails gallery which hasn’t a slider but allow to change the main image which 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 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 few line of HTML and CSS code, and we will guide you how to do that.

Pure CSS Image Gallery with thumbnails Implemenation

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

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 finish! Now you can go ahead and implement grallery into your website. Have a look the Demo below:

See the Pen CSS Image Gallery by codeconvey (@codeconvey) on CodePen.

Feedbacks 2

  1. Hi, this is a wonderful script. Can you tell me if there is a way to surround the main image with thumbnails? Or to have thumbnails on both the left and right? Thanks.

Leave a Reply

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