Image Hover Effekt

Liebe Leute,
ich hab jetzt ziemlich viel durchforstet und bin zu keiner Lösung gekommen, bzw. habe nicht das gefunden wonach ich gesucht habe.

Weiss jemand wie ich diesen Effekt hinbekomme?

https://canvas4.contao-themes-shop.de/hoverimage.html

Ja ich könnte das Theme kaufen, aber ich brauche kein komplettes Theme, ich bräuchte nur diesen Effekt.

Wäre sehr dankbar über Tipps :)
Liebe Grüße
Daniela

Da werden zwei Bilder direkt übereinander platziert (position: absolute). Bei Hover wird das oben liegende Bild mit opacity: 1 eingeblendet. opacity wird dabei animiert (transition) damit der Übergang weicher ist.

Wenn ich es richtig verstanden habe ist die Basis wohl das:

Code:

---

<div class="hoverimage">
  <figure class="image_container">...</figure>
  <figure class="image_container_hover">...</figure>
</div>

---

und

Code:

---

.hoverimage .image_container_hover { opacity: 0; }
.hoverimage:hover .image_container_hover { opacity: 1; }

---

In den <figure> stecken dann die beiden Bilder, die je nach hover-Zustand angezeigt werden.

Edit: Maren war schneller

oooohhh!
Vielen Dank euch beiden!!!

Werde ich gleich ausprobieren ;)

Noch funktioniert das leider nicht.

Wodurch wird das Hover eigentlich ausgelöst?
Nur durch das drüberfahren der Maus?

Steh anscheinend gerade auf der Leitung.

https://developer.mozilla.org/de/docs/Web/CSS/:hover

Zitat:

---

Zitat von fiedsch

https://developer.mozilla.org/de/docs/Web/CSS/:hover

---

Wie konnte ich das nur vergessen?? :D:)
Danke!

Hat jetzt funktioniert. :)