css image rollover


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



Copy this code and paste it in your HTML
  1. CSS Code
  2.  
  3. a.rollover {
  4. display: block;
  5. width: 150px;
  6. height: 44px;
  7. text-decoration: none;
  8. background: url("webvamp.jpg");
  9. }
  10.  
  11. a.rollover:hover {
  12. background-position: -150px 0;
  13. }
  14.  
  15. .displace {
  16. position: absolute;
  17. left: -5000px;
  18. }
  19.  
  20. HTML Code
  21.  
  22. <a href="#" class="rollover" title="Webvamp"><span class="displace">Webvamp</span></a>

URL: http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.