Pure CSS Image Gallery with Thumbnails

Author
In CSS Tutorial, Slideshow Jan 8, 2017
Pure CSS Image Gallery with Thumbnails

Pure CSS Image Gallery with thumbnails

In this article, I will tech you how to create an image gallery 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.

But today we plann to share you a thumbnails gallery which havn’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 idea hwo it works.

It is flexiable, 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 capation by simple defing the data HTML5 attribue. You can also implement it by adding few line of HTML and CSS code, and we wil guide you how to do that.

Pure CSS Image Gallery with thumbnails Implemenation

The HTML looks like nothing but only ahve a gallery div diefine with three of its child divs. The child divs are used to handle both main image and thumnails.

<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 ahve 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 data-caption thml5 attribuete to define the capation which will show on over the iamge. That’s it about HTML and Now the CSS.

How to Style

The Gallery need to set the possition 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 wheerase the widht 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 opticy 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%;
}

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

Author

Ashfaq Ahmed is a freelance creative front-end and WordPress developer. He develops modern, highly interactive websites with cutting edge technologies. In his spare time, he loves to do blogging and web experiments.

Website: http://reverie-tech.com/

Social Links: