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





