Zwei Bilder hintereinanderlegen
CSS Hover-Effekt + HTML

image
image

Die Idee zwei Bilder hintereinanderlegen und so das nächst Bild erst mit überfahren der Maus sichtbar ist. Das ist im Netz den Begriffen wie 'CSS Bild Hover-Effekt' zu finden. So einfach und leicht ist da der Durchblick nicht. Das geht so mit CSS + HTML. Hier ist das nun ganz kurz auseinandergelegt. Und zwar so, dass dann dem Bild keine Umrandung folgt und gültigen HTML. Das ist Mithilfe von Internet-Freund! – dem ich so auch mein Dankeschön kundtun darf.   

CSS Hover Effekt und HTML das Bild

Das Obige ergeht in Folge:   

CSS

.image-mouseover {
position: relative;
width: 110px;
height: auto;
float: left;
margin: 0 15px 15px 0;
}

.image-mouseover .before {
z-index: 1;
}

.image-mouseover:hover .after {
display: block;
}

.image-mouseover .after {
display: none;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}

Dank an Kevin P.

HTML

<div class="image-mouseover">
<img class="before" src="https://wegerl.at/….foto-wegerl.svg" />
<img class="after" src="https://wegerl.at/…2.foto-wegerl.svg" /></div>

Dank an Kevin P.

Links

10 Simple CSS Hover Effects

… Und wie ist dein Erfolg des Beitrags?