Grafik mit Hovereffekt verschieben statt austauschen


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

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.


Copy this code and paste it in your HTML
  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. */

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.