zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Link: Crossfade von Hintergrundbildern bei Hover

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.02.2023, 01:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2007
Beiträge: 8
Frau_Braun befindet sich auf einem aufstrebenden Ast
Standard Link: Crossfade von Hintergrundbildern bei Hover

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.02.2023, 09:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.02.2023, 19:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2007
Beiträge: 8
Frau_Braun befindet sich auf einem aufstrebenden Ast
Standard

Ich dachte, dass es vielleicht mit einem :before und :after geht, aber das habe ich nicht hinbekommen.
Mit Zitat antworten
  #4 (permalink)  
Alt 01.02.2023, 20:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2007
Beiträge: 8
Frau_Braun befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
Antwort

Stichwörter
background-image, css transition

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:39 Uhr.