Posted By

gabbo on 07/30/10


Tagged

hover mouseover Grafik


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Elog


Grafik mit Hovereffekt verschieben statt austauschen


 / Published in: CSS
 

URL: http://www.ohne-css.gehts-gar.net/0026.php

Standardgrafik und Austauschgrafik befinden sich in einer Datei. Es wird aber nur 50% angezeigt. Beim Hover wird lediglich mit background-position verschoben. Vorteil: Keine Ladeverzögerung für die Hovergrafik.

  1. .foto-link
  2. {
  3. width: 290px;
  4. height: 190px;
  5. display: block;
  6. margin: 0 auto;
  7. }
  8.  
  9. .foto1
  10. {
  11. background: url(tor.jpg) no-repeat;
  12. }
  13.  
  14. .foto-link:hover
  15. {
  16. background-position: 0 -190px;
  17. }
  18.  
  19. /* HMTL Snippet
  20.  
  21. <a href="#" class="foto-link foto1"></a>
  22.  
  23. */

Report this snippet  

You need to login to post a comment.