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 tutorials for photo gallery with description

In CSS3, we can create a photo gallery which, on rolling over the thumbnail image, displays the big image, along with it's description. The output of this tutorial would show only in Webkit and Mozilla browsers, and was not found to be supported in IE browsers (upto IE8). Kindly rollover to view the image and it's description.

 

 

 

 

 

 

 

 

 

 

 

 

The steps followed to create the above gallery are shown below.

We create a 'main' div to contain the gallery and the container for the images, respectively

#prod_disp_gal_main
{
width:454px;
background-color:#000000;
}

#prod_disp_gallery
{width:454px;
position:relative;
background-color:#000000;
}

Next we give style to the div containing small images
#prod_disp_gallery ul
{margin:0 px;
list-style:none;
padding:0px;
width:56px;
float:left;
margin:5px 0px;
height:270px;
}

The style on hover can be given as:
#prod_disp_gallery:hover ul
{
background-color:#000000;
}

Here we shall also provide main placeholder for the small images

#prod_disp_gallery ul li
{
list-style:none;
display:inline;
width:50px;
height:36px;
}

The above height and width parameters would depend on the size of your small images.

In this step we give style to the individual placeholder of our images. In the beginning, before hovering, we use the property 'visibility:hidden' to hide our images

#prod_disp_gallery ul li a
{
width:50px;
height:36px;
text-decoration:none;
visibility:hidden;
-webkit-transition-duration:0.5s;
opacity:0;
padding:4px 0 4px 0;
display:block;
overflow:hidden;
}

We also give style to the small images placed inside a
#prod_disp_gallery ul li a img
{
width:50px;
height:36px;
padding:3px 3px 0px 3px;
border:0px;
}

As we want our images to show only on hovering, the style for the same is given as:
#prod_disp_gallery:hover a
{
opacity:1;
overflow:hidden;
visibility:visible;
}

In this step we assign a placeholder for the big image. In the beginning, it is placed to the extreme left, so that it doesnt show before hovering.Style for the same is shown below.

#prod_disp_gallery ul li a b
{
position:absolute;
left:-9999px;
display:block;
width:360px;
height:280px;
margin-top:1px;
}

Now, on hovering the small image, we want our respective big image to show, for which the style is given as:

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

Next,we give a style to the big image placed inside b, before hovering.

#prod_disp_gallery ul li a b img
{
width:auto;
height:auto;
}


On hover, the big image should shift from extreme left to the position where it shows properly in our main gallery. The style for which is given as:
#prod_disp_gallery ul li a:hover b img
{
width:auto;
height:auto;
margin-left:9px;
}


In the last step, we provide placeholder for the description of the images in our gallery
#prod_disp_gallery ul li c
{
position:absolute;
left:-9999px;
display:block;
width:150px;
height:256px;
background-color:#000000;
visibility:hidden;
}

Here the description is again positioned to the extreme left, before hovering as shown above. On hovering, we assign the style to it so that it positions itself, after the div for small images as:

#prod_disp_gallery ul li a:hover c
{
position:absolute;
left:432px;
top:5px;
z-index:100;
padding:7px;
visibility:visible;
background-color:#000000;
}

Thus, on rolling over the small images, the big image would show along with it's description. This brings us to the end of this tutorial. The HTML code for the gallery is given below:
<div id="prod_disp_gal_main">
<div id="prod_disp_gallery">

<img src="images/prod_disp_cover1.jpg" alt="" align="left" style="margin:5px 0 0 8px; background-color:#333333; padding:4px;" />
<ul>
<li>
<a href="#"><img src="images/prod_disp_pic1.jpg" />
<b><img src="images/prod_disp_pic1.jpg" /></b>
<c class="header">
<span>Papayas<br/> <br/>
<span class="content">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
</span>
</span>
</c></a></li>

<li>
<a href="#"><img src="images/prod_disp_pic2.jpg" />
<b><img src="images/prod_disp_pic2.jpg" /></b>
<c class="header"><span >Oranges <br/> <br/>
<span class="content">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
</span>
</span>
</c></a></li>

<li>
<a href="#"><img src="images/prod_disp_pic3.jpg" />
<b><img src="images/prod_disp_pic3.jpg" /></b>
<c class="header">
<span >Strawberries <br/> <br/>
<span class="content" >Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio</span></span>
</c></a></li>

<li>
<a href="#"><img src="images/prod_disp_pic4.jpg" />
<b><img src="images/prod_disp_pic4.jpg" /></b>
<c class="header">
<span >Grapes <br/> <br/>
<span class="content">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio</span></span>
</c></a></li>

<li>
<a href="#"><img src="images/prod_disp_pic5.jpg" />
<b><img src="images/prod_disp_pic5.jpg" /></b>
<c class="header">
<span >Oranges <br/> <br/>
<span class="content">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio</span></span>
</c></a></li>

<li>
<a href="#"><img src="images/prod_disp_pic6.jpg" />
<b><img src="images/prod_disp_pic6.jpg" /></b>
<c class="header"><span >Peaches <br/> <br/>
<span class="content">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio</span></span>
</c></a></li>

</ul>

</div>
</div>


 Tags: Pure CSS3 photo gallery with description


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.