PSD-HTML. These Pixel perfect HTML pages will be tested on Chrome, Firefox, IE, Safari on OS X and Windows Imajine will help you create your own fan page in facebook with an eye appealing graphic banner for its welcome page Custom CMS theme building weboranje.com - showcase of inspirational web 2.0 websites
CSS3 thumbnail photo gallery tutorial

Using CSS3, we can create beautiful fast loading thumbnail gallery which shows the bigger image on hovering.

In this example displayed below, we chose to display thumbnail images horizontally and provided transition for bigger images. Kindly hover on the thumbnail to view the gallery.


The steps followed to create the above gallery are given below:

1. Firstly we assign a main placeholder for the gallery. The style for which was given as:

#thumbnail_gal_main
{
width:561px;
height:510px;
background-color:#000000;
}
Also, the gallery div is assigned which holds the bigger image as well as the thumbnails, inside the main gallery. The style for which is given below:

#thumbnail_gallery
{width:561px;
position:relative;
background-color:#000000;
}

NOTE: The above height and width parameters are arbitrary and would depend on the size of your gallery.

2. In the next step we assign the div for our thumbnail images, the style for which was given as:

#thumbnail_gallery ul
{
list-style:none;
padding:0;
margin-top:10px;
margin-left:7px;
width:100%;
float:left;
}

/*Div for single thumbnail image*/

#thumbnail_gallery ul li
{
display:inline;
width:60px;
height:60px;
/*float:left;*/
}

/*Div for padding of thumbnail image*/

#thumbnail_gallery ul li a {
display:inline;
width:50px;
height:50px;
text-decoration:none;

}

/*Style for the thumbnail image */
#thumbnail_gallery ul li a img
{
width:50px;
height:50px;
/*border:0;*/
padding:2.5px;
border:1px solid #fff;
}

3. In the third step we assign the placeholder and style for our big image, as given below

#thumbnail_gallery ul li a b
{
position:absolute;
left:-9999px;
display:block;
width:548px;
height:365px;
background-color:#000000;
}

In the above style, for the original position for the big image, the values are given in negative so that it does not show before hovering takes place. The style for the big image assigned was:

#thumbnail_gallery ul li a b img {
width:auto;
height:auto;
border:1px solid #fff;
}

4. In the last step we would assign the hover effects.

The style for the big image that would show on hovering above the thumbnail is shown below:

#thumbnail_gallery ul li a:hover b img
{
width:auto;
height:auto;
border:1px solid #000;
margin-left:6px;
}

The style for the thumbnails on hovering is shown below.
#thumbnail_gallery ul li a:hover,
#thumbnail_gallery ul li a:active,
#thumbnail_gallery ul li a:focus {white-space:normal; border-color:#000; outline:0;}

The style for the placeholder of big image on hovering the thumbnail is shown below:

#thumbnail_gallery ul li a:hover b
{
position:absolute;
left:0;
top:5px;
z-index:100;
}

In the above style we have given the left margin for the big image to be 0. This is the most important step, as in this step only, the images that were placed at -9999 pixels left will shift to 0 pixel, so as to show, on hovering the respective thumbnail.

The HTML code for the above code is shown as:

<div id="thumbnail_gal_main">
<div id="thumbnail_gallery">
<img src="images/thumbnail_cover.jpg" alt="" align="left" style="margin:9px 0 0 8px"/>
<ul>
<li><a href="#"><img src="images/thumbnail_pic1.jpg" /><b><img src="images/thumbnail_pic1.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic2.jpg" /><b><img src="images/thumbnail_pic2.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic3.jpg" /><b><img src="images/thumbnail_pic3.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic4.jpg" /><b><img src="images/thumbnail_pic4.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic5.jpg" /><b><img src="images/thumbnail_pic5.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic6.jpg" /><b><img src="images/thumbnail_pic6.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic7.jpg" /><b><img src="images/thumbnail_pic7.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic8.jpg" /><b><img src="images/thumbnail_pic8.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic9.jpg" /><b><img src="images/thumbnail_pic9.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic10.jpg" /><b><img src="images/thumbnail_pic10.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic11.jpg" /><b><img src="images/thumbnail_pic11.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic12.jpg" /><b><img src="images/thumbnail_pic12.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic13.jpg" /><b><img src="images/thumbnail_pic13.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic14.jpg" /><b><img src="images/thumbnail_pic14.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic15.jpg" /><b><img src="images/thumbnail_pic15.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic3.jpg" /><b><img src="images/thumbnail_pic3.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic4.jpg" /><b><img src="images/thumbnail_pic4.jpg" /></b></a></li>
<li><a href="#"><img src="images/thumbnail_pic5.jpg" /><b><img src="images/thumbnail_pic5.jpg" /></b></a></li>
</ul>
</div>
</div>

You can also try out placing the thumbnails on different positions,simply by making few changes in the code, an example of which is shown below:


With this we come to the end of our thumbnail gallery tutorial. Hope you found it interesting and simple.

Tags: Fast loading CSS3 photo gallery, attractive CSS3 photo gallery, CSS3 photo gallery to display bigger images on thumbnail rollover.

 

Bookmark and Share
HI, AM JAY, AND I IMAJINE
I am a freelance web designer and web application developer with over 7 years of result oriented experience. I am accustomed to working in a dynamic and goal oriented client environment. My strengths include the ability to visualize, personalize and create a truly unique and enthralling web presence. My passion apart from web design, logo design, Flash animation / actionscripting, CMS Customization, print and web development includes photography, game programming, tutorial development (includes Adobe Flash, Adobe Fireworks and Adobe Photoshop) and blogging.
Read more about me...
CONTACT US
Name :  
Email Address :  
 
Comments :
 
jayanthi.varma@imajine.in  |  © 2008 - 2012 Imajine.