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 tutorial for display products and its description

In CSS3, we can create an effect, wherein, on hovering the image, it displays it's information. This utility can be variously used, as for the pricing of any product in a catalogue or personal details etc. An example of the same is shown below. Kindly mouse over the images for information display.

For the above effect the CSS3 styles and HTML code for the same is given below:

1. Firstly, the background for the images was given

#prod_display_gal_main
{
width:615px;
height:610px;
background:url(images/plank.bg.jpg) repeat;
}

Here wooden plank was given as the background. Next we assign a placeholder for the images as shown below.

#prod_display_gallery
{
width:615px;
position:relative;
height:100%;
}

2. In the second step we assign the position of our images relative to the background

#prod_display_gallery ul
{
list-style:none;
padding:0;
margin-top:80px;
margin-left:22px;
width:100%;
float:left;
}

3. Next, we would assign the placeholder for the dimensions of our image

#prod_display_gallery ul li
{
display:inline;
width:260px;
height:230px;
}

4. In this step we specify padding and margin for our image

#prod_display_gallery ul li img
{
float:left;
width:240px;
height:210px;
margin:15px;
padding:7px;
}

5. In this step we assign a placeholder for the product information

#prod_display_gallery ul li c
{
display:none;
}

In the above style, the placeholder for product information does not show before hovering due to 'display: none;' property.

On hovering, we do not wish to show our image and so for that we give the code as:

#prod_display_gallery ul li:hover img
{
display:none;
}

6. In this step we assign a style for the product information placeholder, when the list is hovered over

#prod_display_gallery ul li:hover c
{
display:inline;
float:left;
background-image:url(images/product_display_pic_ref.jpg);
width:240px;
height:210px;
z-index:100;
margin:15px;
padding:7px;
}


Thus, the product information would display on hovering. With this, we come to the end of CSS3 style portion of the tutorial. 

The HTML code for the above result is given below:

<div id="prod_display_gal_main">
<div id="prod_display_gallery">

<ul>
<li><img src="images/product_display_pic1.jpg" /><c><strong>Designer silver brooch</strong> <br/>
<br/>Duis autem lorem ipsum dolor consectuer dignissim qui blandit praesent luptatum. </c>
</li>
<li><img src="images/product_display_pic2.jpg" /><c><strong>Carved silver bangles </strong><br/>
<br/>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper qui blandit.</c>
</li>
<li><img src="images/product_display_pic3.jpg" /><c><strong>Exquisite designer bangles</strong><br/>
<br/> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse option congue. </c>
</li>
<li><img src="images/product_display_pic4.jpg" /><c><strong>Blue beaded necklace</strong><br/>
<br/> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id facer.</c>
</li>

</ul>

</div>
</div>

That's all folks. Hope you found it simple and would try it out yourself.

Tags: CSS3 product display tutorial, CSS3 tutorial to display products and its 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.