Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts

CSS Library: Image CSS: CSS3 demos: Here

CSS3 Image Caption effects

Author: Dynamic Drive

The following demos transition HTML's <figcaption> element to reveal captions inside images in a variety of interesting ways. CSS3's transform property is used to position (via translate3d()) and rotate the different components inside a <figure> element. The result is flexible caption effects that work on images of varying dimensions instantly without the need to modify the CSS code.

The effects work on IE10+ and modern versions of other browsers. In IE9 and below, no caption is shown at all with some of the demos.

Demos:

An awesome picture
An awesome picture caption! A link
An awesome picture
An awesome picture caption! A link
An awesome picture
An awesome picture caption! A link
An awesome picture
An awesome picture caption! A link
An awesome picture
An awesome picture caption! A link
An awesome picture
An awesome picture caption! A link

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 05/28/2015

Revision History: None

Usage Terms: Click here

Your Comments (0)

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.


Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.