Frage von ultrabrot123, 16

CSS Image-Fade funktioniert nicht?

Bei mir werden die 2 Bilder nebeneinander angezeigt. Eigentlich sollten sie übereinander sein und dann das eine transparent werden. Weis jemand wo der Fehler liegt? Ich benutze Chrome (neuste Version / 46.0.2490.86 m).

    <!DOCTYPE html>
        <html>
        <head>
        <style>
         #fade {
            position:relative;
            height:130px;
            width:130px;
            margin:0 auto;
         }
         
         #fade img {
          position:absolute;
          left:0;  
          transition: opacity 1s ease-in-out;
         }
         
         #fade img.top:hover{
          opacity:0;
        }
        </style>
        </head>
        <body>
          <div if="fade">
            <img class="bottom" src="Logo_SW_0.jpg"/>
            <img class="top" src="Logo_SW.jpg"/>
        </div>
        </body>
        </html> 

Vielen Dank und schöne Grüße Brot

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von userfromberlin, 14

Du hast statt "id" "if" geschrieben!

Kommentar von ultrabrot123 ,

Danke jetzt funktioniert es :)

Antwort
von yerooke, 16

Warum so kompliziert?

Hier ein Beispiel: https://jsfiddle.net/namq4cru/

Kommentar von ultrabrot123 ,

Vielen Dank!

Nur muss ich noch hinzufügen, dass ich einen langsamen Übergang brauche, was ich leider in der Frage vergessen habe zu schreiben^^

Kommentar von yerooke ,

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten