Beautiful Thumbnail Hover Effect Using CSS3

Beautiful Thumbnail Hover Effect Using CSS3

Using CSS3 you can add really beautiful and elegant effects to your website. And that’s the beauty of CSS3. We bring you a Beautiful Thumbnail Hover Effect Using CSS3 tutorial which you can use in your portfolio gallery. You just have to hover on the thumbnail of the image and it will pop out like any other jQuery gallery.

So lets start with the simple HTML code,

HTML

To arrange the thumbnails in our gallery we just have to write a simple unordered list with images.

<!--This is our main container, which contains the thumbnail list-->
<div>
<h1>Beautiful Thumbnail Hover Effect Using CSS3</h1>
<ul>
<li><img src="img/1.jpg" alt="beautiful-thumbnail-hover-effect-01"></li>
<li><img src="img/2.jpg" alt="beautiful-thumbnail-hover-effect-02"></li>
<li><img src="img/3.jpg" alt="beautiful-thumbnail-hover-effect-03"></li>
<li><img src="img/4.jpg" alt="beautiful-thumbnail-hover-effect-04"></li>
<li><img src="img/5.jpg" alt="beautiful-thumbnail-hover-effect-05"></li>
<li><img src="img/6.jpg" alt="beautiful-thumbnail-hover-effect-06"></li>
</ul>
</div>
<!--Main container ends-->

CSS

Applying some css to look our list proper

.container {
width:60%;
min-width:300px;
margin:0 auto;
font-size:100%;
text-align: center;
}
.container:after {
content:"";
display:block;
clear:both;
height:50px;
}
h1 {
font-size:40px;
font-family: 'BebasNeueRegular', Verdana, Geneva, sans-serif;
font-weight:normal;
color:#FFF;
margin-top:50px;}
ul {
width:100%;
list-style:none;
float:left;
padding:0 0 2.5% 0;
margin-top:5px;
}
ul li {
width:30%;
float:left;
margin:2.5% 0 0 2.5%;
position:relative;
}
ul li img {
max-width:100%;
float:left;
border:8px solid #fff;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

And here comes the css which will add some real effects to our thumbnail gallery

/*--- Thumbnail Effects ---*/
.thumb li {
-moz-transition:all 1s ease;
-webkit-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease;
}
.thumb li:hover {
-moz-transform:scale(2.6) translate(100px, 38px);
-webkit-transform:scale(2.6) translate(100px, 38px);
-o-transform:scale(2.6) translate(100px, 38px);
-ms-transform:scale(2.6) translate(100px, 38px);
transform:scale(2.6) translate(100px, 38px);
z-index:2;
}
/*This is the second thumbnail*/
.thumb li:nth-of-type(2):hover {
-moz-transform:scale(2.6) translate(0, 38px);
-webkit-transform:scale(2.6) translate(0, 38px);
-o-transform:scale(2.6) translate(0, 38px);
-ms-transform:scale(2.6) translate(0, 38px);
transform:scale(2.6) translate(0, 38px);
}
/*This is the third thumbnail*/
.thumb li:nth-of-type(3):hover {
-moz-transform:scale(2.6) translate(-100px, 38px);
-webkit-transform:scale(2.6) translate(-100px, 38px);
-o-transform:scale(2.6) translate(-100px, 38px);
-ms-transform:scale(2.6) translate(-100px, 38px);
transform:scale(2.6) translate(-100px, 38px);
}
/*This is the fourth thumbnail*/
.thumb li:nth-of-type(4):hover {
-moz-transform:scale(2.6) translate(100px, -38px);
-webkit-transform:scale(2.6) translate(100px, -38px);
-o-transform:scale(2.6) translate(100px, -38px);
-ms-transform:scale(2.6) translate(100px, -38px);
transform:scale(2.6) translate(100px, -38px);
}
/*This is the fifth thumbnail*/
.thumb li:nth-of-type(5):hover {
-moz-transform:scale(2.6) translate(0, -38px);
-webkit-transform:scale(2.6) translate(0, -38px);
-o-transform:scale(2.6) translate(0, -22px);
-ms-transform:scale(2.6) translate(0, -38px);
transform:scale(2.6) translate(0, -38px);
}
/*This is the sixth thumbnail*/
.thumb li:nth-of-type(6):hover {
-moz-transform:scale(2.6) translate(-100px, -38px);
-webkit-transform:scale(2.6) translate(-100px, -38px);
-o-transform:scale(2.6) translate(-100px, -38px);
-ms-transform:scale(2.6) translate(-100px, -38px);
transform:scale(2.6) translate(-100px, -38px);
}

When you hover the thumbnail, it will scale the image to 2.6 times and translate will actually arrange the position of hovered image from top-bottom and right-left. As you increase the number of thumbnails, you have to set these positions accordingly. Just hover your thumbnail and set the position.

PS: We will appreciate if you share some words about us and that will be a great help from your side. You can subscribe to Dzyngiri through various social networks to receive updates regarding new articles. Cheers to WWW !

Tags css3, design, featured, tutorials