Link: Crossfade von Hintergrundbildern bei Hover

Frau_Braun · #1 (**permalink**) 01.02.2023, 00:56

Hallo,

ich suche nach einer CSS-Lösung für einen sanften Wechsel zwischen einem Link-Bild und einem anderen Bild bei Hover über dem Link.

HTML/PHP:

HTML-Code:

<div class="enter"><a href="<?= $article->url() ?>"></a></div>

CSS bisher:

Code:

.enter a {
  display: block;
  background: url('/assets/img/fh-button-fisch.png');
  background-size: 250px 250px;
  background-repeat: no-repeat;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: auto;
} 

.enter a:hover {
  background: url('/assets/img/fh-button-pfeil.png');
  background-size: 250px 250px;
  background-repeat: no-repeat;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: auto;
}

Versuch mit

Code:

.enter a {
  display: block;
  background: url('/assets/img/fh-button-fisch.png');
  background-size: 250px 250px;
  background-repeat: no-repeat;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: auto;
  transition: opacity 0.5s ease-in-out;
  opacity: 1; 
} 

.enter a:hover {
  background: url('/assets/img/fh-button-pfeil.png');
  background-size: 250px 250px;
  background-repeat: no-repeat;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: auto;
  opacity: irgendwas
}

Leider funktioniert das mit der transition nicht.
Hat jemand eine Idee?

Hier der Link zur Website, auf der der Link läuft; es ist der Kreis in der Mitte:
https://www.fischhobel.de

cloned · #2 (**permalink**) 01.02.2023, 08:25

Du kannst nicht von einem Bild auf ein anderes faden lassen. Du musst beide Bilder gleichzeitig im Quelltext haben und dann zB von einem die opacity auf 0 setzen während es exaxt über dem anderen platziert ist.

Frau_Braun · #3 (**permalink**) 01.02.2023, 18:38

Ich dachte, dass es vielleicht mit einem :before und :after geht, aber das habe ich nicht hinbekommen.

Frau_Braun · #4 (**permalink**) 01.02.2023, 19:56

So, jetzt habe ich's, dank deinem Hinweis:

HTML-Code:

<div id="emblem" aria-label="irgendwas">
  <img class="bottom" src="img2png" />
  <a href="xy.htm">
  <img class="top" src="img1.png" />
</div>

Und CSS:

Code:

#emblem {
  display: block;
  height:100%;
  margin: auto;
}

#emblem img {
  position:absolute;
  -webkit-transition: opacity 0.8s linear;
  -moz-transition: opacity 0.8s linear;
  transition: opacity 0.8s linear;
}

#emblem img.top:hover {
  opacity:0;
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem: Menüdarstellung	Normal	CSS	1	07.10.2011 13:25
Fertiges Drop-Down Menü ins Layout einfügen	VoB	CSS	6	15.03.2011 16:14
clearen im 21 Jhr.	Muamicus	CSS	23	14.12.2010 19:50
Problem mit CSS - Attribute für hover	tzepf	CSS	0	09.12.2006 16:56
Problem: Positioniertes DIV bei Link HOVER	Sefiroth	CSS	5	10.08.2005 16:16