Image rollovers using CSS
There are many ways you can make rollover effects for links, images, or other objects on your site but some ways are clearly better than others. I like to stay away from JavaScript because of speed and instead, define the rollover in CSS. The navigation bar on this site is done in CSS and it just changes color a bit when you rollover. Most of the time this is enough when designing a website but sometimes you want to have an image change. Maybe you want to blur something or use weird fonts for text and thus, you want an image to change on rollover.
I noticed that most people on the web accomplish this with JavaScript but its still faster and better to use CSS. Why? You don’t have to preload images in JavaScript and load the JS code. So how to do it? Create one image with three states. This means one image that actually has three different images inside and than use CSS to show a certain part of the image depending on the user actions. If you use one image with 2 or 3 states you also eliminate the “flicker” effect that is sometimes caused by other CSS methods of doing rollovers. To clarify all of this, take a look at my example. I hope someone out there finds this useful.
Popularity: 15%
If you enjoyed this post, please consider to leave a comment.
Comments
No comments yet.
Leave a comment