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 2 of 2 pages  <  1 2

Wow Its amazing dude, new learners will be benefited with this blog, will get lot of ideas in css...
Posted by Education System India on 03/10, 05:21 AM

Comment Pages 2 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.