Return to Snippet

Revision: 29502
at July 30, 2010 18:00 by gabbo


Initial Code
.foto-link
{
width: 290px;
height: 190px;
display: block;
margin: 0 auto;
}

.foto1
{
background: url(tor.jpg) no-repeat;
}

.foto-link:hover
{
background-position: 0 -190px;
}

/* HMTL Snippet 

<a href="#" class="foto-link foto1"></a> 

*/

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

Initial Description
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.

Initial Title
Grafik mit Hovereffekt verschieben statt austauschen

Initial Tags


Initial Language
CSS