Posted By

kcmr on 11/19/08


Tagged

css html rollover


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

Hirmine
ericgibb
Bluewall
NagaTragic1322
vali29
michellebracken
clintonhalpin


Image rollover () without javascript


 / Published in: HTML
 

URL: http://uninstallme.com/rollover-de-imagenes-en-html-elemento-img-sin-javascript/

  1. The image contains the two states for the rollover (hover or normal) like we will do using a background image with CSS.
  2.  
  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
  9.  
  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"
  13.  
  14. HTML code:
  15. <span class="img-rollover"><a href="#"><img src="image.gif" alt="" /></a></span>
  16.  
  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. }
  29.  
  30. Demo at http://uninstallme.com/rollover-de-imagenes-en-html-elemento-img-sin-javascript/

Report this snippet  

You need to login to post a comment.