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.
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.
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.
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.
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 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.