1. CSS
  2. Flash
  3. HTML
  4. Illustrator
  5. Java
  6. JavaScript
  7. Maya
  8. Photography
  9. Photoshop
  10. PHP
  11. Ruby
  12. Ruby on Rails
  13. 3ds Max

CSS: The easiest image hover effect, using css

  1. Clicks today:
  2. Clicks this month:
  3. Overall rating:

CSS » Basics — over 12 years ago
There are many ways to accomplish an image hover, this just seems to be the easiest way to do it! Although it does have it's limitations, and the image being used has to be a relatively simple one.


avatarryne over 12 years ago

This technique doesn't work with IE6

avatarshaziamistry over 12 years ago

Hi ryne, it's not really that the technique does not work in IE6, for example, if you did it with an anchor tag instead, it would work, but the hover effect used in the example is not supported by IE6. In newer browsers, you can hover any element, not just anchor tags. Hope this explanation helps!

avatarholman (administrator and creator)over 12 years ago

I don't have access to IE7 right now, so I can't check myself, but do you happen to know if Microsoft's tackled :hover on other elements in IE7 yet?

avatarshaziamistry over 12 years ago

Hi Zach, yes IE7 handles it. li:hover, as in the example, works in IE7.

Your Comment

You must be logged in to post a comment.