Tipps und Tricks » kleine webmaster FAQ
ID #1816
hover-Effekt mit CSS und background-image
Hallo,
möchte man nicht bei jedem hover-Effekt Bilder nachladen müssen, bietet es sich an ein Hintergrundbild zu verwenden und dessen Position zu verschieben.
Als Vordergrund dient ein leeres GIF- oder PNG-Bild mit transparenten Hintergrund:
<a id="prev" href="./index3.html" onclick="wechsel(1);"><img src="./leer.gif" border="0" /></a>
Das Hintergrundbild enthält 4 Grafiken:
diese werden mit CSS mittels background-position verschoben:
a#next img{
background-position:-26px -4px;
width:82px;
height:210px;
background-image:url(./navi.jpg);
} a#prev img{
background-position:102px -4px;
width:76px;
height:210px;
background-image:url(./navi.jpg);
}
a#next:hover img{
background-position:-18px 230px;
} a#prev:hover img{
background-position:94px 234px;
}
.
.
Tags: background-image, CSS, CSS3, Hover, HTML5, webmaster
Verwandte Artikel:
- Achtung ! Anson-Modelle in 1:20 als 1:18 angeboten
- Wie groß ist Maßstab 1:xx ?
- wie kann man eine Tabelle mit DIV-Tags und CSS3 erstellen ?
Letzte Änderung des Tests: 2015-07-19 16:20
Autor: pipe
Leser: 3879 (1.93 pro Tag )
Revision: 1.0
..