JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="KateKate, post: 13604, member: 4656"] Ich habe folgenden HTML-Code: [CODE=html]<div id="emblem" aria-label=">Alternativtext"> <img class="bottom" src="bild2.png" /> <a href="http://www.irgendwas.de"> <img class="top" src="bild1.png" /> </div>[/CODE] und folgendes CSS: [CODE=css]#emblem { display: block; height:100%; padding-right: 250px; margin: auto; } #emblem img { position:absolute; width: 250px; height: 250px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; transition: opacity 0.8s linear; -webkit-transition: opacity 0.8s linear; -moz-transition: opacity 0.8s linear; } #emblem img.top:hover { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; opacity:0; }[/CODE] Das Ganze soll ein Kreis mit einem Link sein. Bei Mouseover wird das Bild ausgetauscht. Warum zeigen mir Edge und Chrome das nicht korrekt an? Bei Mouseover wird mir immer das gesamte Bild 2 angezegt, mit einem unschönen Rahmen. Der gesamte Button #emblem liegt auf einem Hintergrundbild; dort sieht man ein quadratisches Bild mit weißem Rahmen. Andere Browser wie Firefox, Safari, Blisk, Opera zeigen den Wechsel ordnungsgemäß an. PS., gerade getestet: Ohne die transition tritte das Problem bei Edge und Chrome nicht auf. Kann jemand helfen? [/QUOTE]