Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Image CSS: DIVs and containers: CSS3 demos: Here

Image with sliding description panel using CSS3 transitions

Author: Dynamic Drive

This CSS example shows how to add an animated description panel to images that slides open when the mouse rolls over the image using CSS3 transitions. By wrapping the image inside a relatively positioned container alongside a newly injected description DIV to house the description itself, we can slide the later into view using CSS3's transform:translate() property. All four sliding directions are shown below (up, down, right, or left). The onset of the sliding animation is delayed by 0.5 seconds each time using the transition-delay property, so it occurs after that of the CSS3 shadow being added to the image to create the effect of a raised image. The result is a cool image with a sliding description panel that uses nothing more than HTML/ CSS to create the effect.

The following works best in a modern browser that supports CSS3 transitions, namely, IE10+, FF3.5+, Chrome/Safari, and Opera 10. Lesser browsers such as IE9 will still see the description panel onMouseover, just sans the transition:

Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.

Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.

Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.

Capable of seating 50,000 spectators, the Colosseum was used for gladiatorial contests and public spectacles such as executions.

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 02/10/2012

Revision History: None

Usage Terms: Click here

Your Comments (11)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 2 pages  1 2 >

Awesome stuff...it help me lot....
Posted by Ashish kamble on 02/16, 09:42 PM
Thanks for this i was looking for it for long time
i finally i have got it
so thanks to
very much again
Posted by gaurav kumar jha 009 on 02/17, 06:13 AM
I am lucky that I discovered this web site, just the right info that I was searching for!
Posted by Service Κινητων on 02/20, 06:27 AM
It's nice, but the transition effect is little jagged in Firefox 10. Maybe it would be better accomplished with some JavaScript?
Posted by VectorPile on 02/22, 12:48 PM
Thanks for sharing this CSS code. I really like to put an animated description panel on my pictures and so glad I came across your post. I am now excited to try it on my site. :)
Posted by Revision Tips on 02/23, 06:32 AM
if want the image to be at the centre of the page wht changes should i make
Posted by srirag on 02/24, 06:54 AM
Very good Site it is help me time to time
Posted by amit on 03/04, 11:29 PM
Image with sliding description panel using CSS3 transitions pretty outstanding from all side. Would you mind to keep it update?
Posted by JANET on 03/07, 12:43 AM
good day everyone im looking for martin black is he still on here
alf
Posted by alfred beilin on 03/07, 04:50 PM
Thanks for sharing a great knowledge.
Posted by Laptop Review on 03/08, 11:33 AM

Comment Pages 1 of 2 pages  1 2 >

Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.