Before and After (Peel Back) Image
"Before and After" images are always fun to look at, especially if the right transition is used to effectively swap between the two. This CSS example shows just that, using CSS3 animation to animate the "clip" property of the "before" image to peel back and reveal the "after" image onMouseover. The result is a simple but sleek "Before and After" Image effect!

CSS 3D Flip
One of the groundbreaking features in CSS3 is the ability to rotate HTML elements in 3D space. The below CSS code shows how to rotate a "2 sided" element either on its X or Y axis to reveal the content on the back side.

CSS Image Gallery
This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page.

CSS Popup Image Viewer
Enable arbitrary links or image thumbnails to pop up an enlarged (different) image onMouseover by using this CSS code. With the help of CSS's ":hover" pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, "popping" up on demand.

CSS Smart Image Enlarger
This versatile CSS image enlarger lets you display image thumbnails that resize to their original dimensions when the mouse rolls over them. Only one image is needed in each case.

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.

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.