Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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
Copyright 2006-2016 Dynamic Drive