Image rollovers have become incredibly popular over the last couple years and with good reason. They enhance the user experience while also communicating subtle bits of essential information without using any words or taking up any extra space.
This CSS tutorial is great, in that it moves at a nice even pace, provides plenty of stopping points for those who are following along and the information shared is all relevant to the task at hand. Very straightforward and quite simple to understand. This approach utilizes CSS Sprites, which is a good way to keep loading times fast and file sizes small.
The goal of this lesson is to create three image rollovers with CSS and HTML, each transforming a faded grey image into a color image when a user hovers over it. There is actually quite a bit of information delivered in this video tutorial and the block of code responsible for all the magic is a bit much for this post. So we will keep things short and simple here and let the video speak for itself.
A few key points to make note of. Although the CSS function transition: opacity; is currently supported by Safari, Firefox and Chrome it is not supported by Internet Explorer. (Use this helpful link to check on compatibility of browsers.) Positioning of your images is very important, as it dictates what part of the image is revealed in the users browser (remember a sprite contains more than one image in a shared space). The third example in the video, the YouTube logo, is not actually a sprite, nor is it more than one image. It is only one image that you change the opacity levels to accomplish the full-color reveal.
If you have enjoyed this informative CSS tutorial video, you may find this recent post on CSS Sprites helpful as well. Thanks for stopping by!
Pingback: Creating Sleek, Semantic, Sliding Buttons with CSS3!
Cool Dude !!