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:

pfeile

Demo auf pipes-garage.de

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:

Letzte Änderung des Tests: 2015-07-19 16:20
Autor: pipe

Leser: 3535 (2.23 pro Tag )


Revision: 1.0

Artikel bewerten

bisher bewertet
3.57 (72 ×)

1 2 3 4 5

Kommentar schreiben


Spam Schutz

..