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 Lift up effect
This simple CSS effect demonstrates using CSS3's rotate() and box-shadow properties to create a DIV that lifts up slightly from a specific area, in this case, the top,

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 Blur Filter Images
We apply CSS3's blur filter to FIGURE elements to overlay text in dramatic fashion when the mouse rolls over the figure, by blurring out the containing image first.