CSS Library Image CSS
Welcome to Dynamic Drive's new CSS library! Here you'll find original, practical CSS codes and examples such as CSS menus to give your site a visual boast.
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.
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.
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!
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.
Spinning icons using CSS3 transform
An effect that seems to be popping up with increased frequency is the spinning image, or more precisely, icons. Move the mouse over an icon, and it spins (rotates) on its axis to draw attention to itself. This is realized using CSS3's
transform: rotate(xdeg) property.
Pull out image using CSS3 keyframe animation
CSS3 animation can be fine tuned and broken up into "frames", thanks to the @keyframes rule. Currently supported in FF5+, Safari, Chome, and possibly IE10, the following uses CSS3 keyframes to create a pull out image that is revealed when the mouse rolls over an image. In IE, it degrades well in both IE8 and IE9.
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.