CSS3 Hover Image Gallery
A sleek image gallery that takes advantage of CSS3 animation, shadows, and the "transform" property to instantly add a smooth hover effect to its images, whereby the image enlarges and moves closer to the user.

CSS3 Image Caption effects
The following demos transition HTML's <figcaption> element to reveal captions inside images in a variety of interesting ways.

Floating image with no text wrap
This example shows how to float images (or any content) so that the adjacent text does not wrap around it.

Grayscale Image Gallery
This CSS image gallery renders the thumbnails initially in grayscale until clicked on to reveal a larger version of an image. You can quickly cycle through the thumbnails using the "Tab" key. The grayscale treatment is made possible thanks to CSS filters.

Highlight image hover effect (opacity or borderize)
The first example changes the opacity of any image link when the mouse moves over it using the "hover:" pseudo class of CSS. Note the two different properties used to specify opacity in CSS below. In IE 5.5+, the "filter" property is used (range: 0-100), and in Firefox, "-moz-opacity" (range: 0-1). Both properties are proprietary.

Image Bubbles using CSS3 transform and transitions
This example shows how to use CSS3's transform and transition properties to scale and enlarge an image when the mouse rolls over it, in an animated fashion.

Image with sliding description panel using CSS3 transitions
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.