CSS3 for photo gallery thumbnail

CSS3 Tutorial for photo gallery thumbnail image display and zoom / scale / glow effect on mouse rollover

In this tutorial, we have used pure CSS to display photo gallery thumbnail images and 'the Bonus point' is, we have made it interesting by providing mouse rollover effect which is also built on pure CSS. No scripting language used anywhere. Interesting? :)
The rollover effects which we have included here is

• Zoom effect
• Glow effect

Final output

Image description

Image description

Image description

Image description

The example on this page was seen to work properly in Safari, Chrome, Opera and Mozilla browsers.

In the first step, div assigned for the black background of the images:

#div_image
{
background-color:#000000;
margin:auto;
width:800px;
height:200px;
}

NOTE: The above width and height dimensions would depend on image dimensions.

The images of the gallery were saved in the folder. The div assigned to the images is given in the code below:

.img {
margin:10px;
border-width:1px;
border-color:#009900;
border-style:solid;
height:auto;
width:auto;
float:left;
text-align:center;
position:relative;
display:inline;
background-color:#000000;
}

In the second step, we assign style to the anchor tag for images as shown:

.image_link
{
margin:10px;
border:1px solid #000000;
float:left;
position:relative;
display:inline;
height:136px;
width:156px;
-webkit-transition:0.5s;
}

In the above 'div', the last line of the style refers to the time taken by image (in seconds) for both zoom in and out. It can be varied, to give different zoom time for the transition.

In third step, we give the hover effect to the images:

.img:hover
{
border-width:1px;
border-color:#000000;
}

The above style is given so that the border of the image is not visible on hovering and only the glow effect shows.The border color is thus assigned as the background color i.e. black.

.img img:hover
{
margin:10px;
-webkit-transform: scale(1.1);
-webkit-box-shadow:0px 0px 10px #fff;
-moz-transform: scale(1.1);
-moz-box-shadow: 0px 0px 10px #fff;
}

In the above style, '-webkit-transform: scale(X)' and '-moz-transform: scale(X)' were used to scale/zoom the images in Webkit and Mozilla browsers respectively. Here the thumbnail images were scaled to 1.1 times.

The'-webkit-box-shadow' and '-moz-box-shadow' property was used to give glow effect to the images on hover, in Webkit and Mozilla browsers respectively.

In the last step, we assigned style to the text for image description as shown below:

.desc
{
text-align:center;
font-weight:normal;
width:156px;
color:#009900;
margin-left:8px;
font-family:Tahoma;
}

The HTML code:

<div id="div_image">
<div class="img">
<a target="_blank" href=#><img src="pic1.jpg" width="150" height="130" class="image_link" /></a>
<div class="desc" >Image description</div>
</div>
<div class="img">
<a target="_blank" href=#><img src="pic2.jpg" width="150" height="130" class="image_link" /></a>
<div class="desc">Image description</div>
</div>
<div class="img">
<a target="_blank" href=#><img src="pic3.jpg" width="150" height="130" class="image_link" /></a>
<div class="desc">Image description</div>
</div>
<div class="img">
<a target="_blank" href=#><img src="pic4.jpg" width="150" height="130" class="image_link" /></a>
<div class="desc">Image description</div>
</div>
</div>

With this we come to an end of the tutorial. Hope you enjoyed different hover effects using CSS.
IF you wish to learn more, continuation of this tutorial can be found at - 'More rollover effects'
Tags: CSS3 for image display, CSS3 for photo gallery thumbnail display, CSS3 for mouse rollover effect, CSS3 for zoom in and out effect, CSS3 for image scaling on rollover, CSS3 for glow effect, CSS3 to rollover glow effect