Frage von ultrabrot123, 13

CSS 2 Bilder gleichzeitig/nacheinander transparent werden lassen?

Hallo Community,

ich würde gerne 2 Bilder gleichzeitig oder nacheinander transparent werden lassen, dass man einen langsamen Übergang zwischen den 3 Bildern hat(die oberen 2 werden transparent, dass man dann das untere sieht. Das heißt, dass das 2. Bild anfängt transparent zu werden, wenn das Oberste seinen "Transparent-Vorgang" halb abgeschlossen hat. Zwischen den 3 Bildern soll ein langsamer Übergang von ca. 2s sein.

Das Problem liegt dabei, dass nur das Oberste transparent wird dann das 2. aber nicht mehr. Ich benutze Chrome.

Hier der Code:

<!DOCTYPE html>
<html>
<head>
<style>
 img {
    position:absolute;    
    top: 0;
    left:0;  
    color: transparent;
    transition: opacity 1s ease-in-out;
 }
  
#fade img.top:hover{ 
  transition: opacity 2s ease-in-out;
  opacity:0;
}

#fade img.top2:hover{    
  transition: opacity 1s ease-in-out;
  opacity:0;
}


</style>
</head>
<body>
  <div id="fade">
    <img src="Logo_SW_0.jpg"/>
    <img class="top" src="Logo_SW_1.jpg"/>
    <img class="top2" src="Logo_SW.jpg"/>
</div>
</body>
</html>

Schon mal vielen Dank im Voraus Schöne Grüße

Brot

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von userfromberlin, 13

http://jsfiddle.net/IgelJ/67b0r8ky/ sollte helfen

Antwort
von WhiteGandalf, 13

Das hover muss auf das div drüber!

Kommentar von ultrabrot123 ,

In wie fern meinst DU das?
Könntest Du ein kleines Beispiel geben?

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten