Image rollover () without javascript

/ Published in: HTML
Save to your folder(s)

Copy this code and paste it in your HTML
  1. The image contains the two states for the rollover (hover or normal) like we will do using a background image with CSS.
  3. We need to wrap the image in a <span> element with the following styles:
  4. display: block;
  5. width: "same as visible area of each state (normal or hover) of the image";
  6. height: "same as visible area of each state of the image";
  7. overflow: hidden;
  8. position: relative; // IE needs it
  10. The <img> element is wrapped by an <a> element. We need the following styles to the a:hover:
  11. position: relative;
  12. top: "negative position same as height of the image visible area"
  14. HTML code:
  15. <span class="img-rollover"><a href="#"><img src="image.gif" alt="" /></a></span>
  17. CSS code:
  18. span.img-rollover{
  19. width: 20px;
  20. height: 20px;
  21. display: block;
  22. overflow: hidden;
  23. position: relative;
  24. }
  25. span.img-rollover a:hover{
  26. top: -20px;
  27. position: relative;
  28. }
  30. Demo at


Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.