Problem mit Microsoft Edge / Chrome: border-radius + opacity geht nicht zusammen

[KateKate]

Ich habe folgenden HTML-Code:

<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>

und folgendes 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;
}

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?

 

[Sempervivum]

Hallo KateKate und willkommen im Forum!
Mit dem Code, den Du gepostet hast, kann ich das leider nicht reproduzieren, sowohl im Edge als auch im Chrome ist das untere Bild rund, wenn es beim Hover zum Vorschein kommt. Möglicher Weise liegt das daran:

Der gesamte Button #emblem liegt auf einem Hintergrundbild; dort sieht man ein quadratisches Bild mit weißem Rahmen.

Am besten mal die URL der vollständigen Seite posten.

Dein HTML ist jedoch fehlerhaft, es fehlt das schließende </a>.

Auf die Präfixe kann man heute verzichten.

Übrigens: Um Elemente über einander zu legen, gibt es mit Gridlayout eine Alternative zur abs. Positionierung:

        #emblem {
            display: inline-grid;
            /* height: 100%;
            padding-right: 250px;
            margin: auto; */
        }

        #emblem img {
            /* Wir legen beide Bilder in die selbe Zelle des Grid,
            dann liegen sie übereinander: */
            grid-row: 1/2;
            grid-column: 1/2;
            border-radius: 50%;
            width: 250px;
            height: 250px;
            transition: opacity 0.8s linear;
        }

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

    <a id="emblem" href="example.html">
        <img class="bottom" src="images/dia0.jpg" />
        <img class="top" src="images/dia1.jpg" />
    </a>

 

[KateKate]

Erstmal danke für die Antwort. Die Präfixe hatte ich sicherheitshalber wegen des Fehlers (wo auch immer er liegt) hinzugefügt.
Hier der Link: (Link nach Bearbeitung gelöscht).
Den anderen Code probiere ich gleich mal aus...

 

[Sempervivum]

Das ging ja schnell, danke. Im Edge tritt jetzt genau der Effekt auf, den Du beschreibst. Ich untersuche das ...

 

[KateKate]

1000 Dank. Und auch danke für das nette Willkommen.

 

[KateKate]

Mir ist noch etwas aufgefallen. Ich habe zwar das schließende </a> vergessen, aber nur so funktioniert der Link überhaupt. (Man merkt, ich bin kein Profi.)

 

[Sempervivum]

Ich habe zwar das schließende </a> vergessen, aber nur so funktioniert der Link überhaupt.

So wie Du das schließende </a> hinzu gefügt hast, ist der Link leer. Er muss das img.top umschließen, aber das hast Du anscheinend schon bemerkt, denn mit dem was jetzt online ist, funktioniert es.

Ein wirkliche Erklärung für den Effekt habe ich nicht, außer einem Fehler in den fraglichen Browsern. Ich kann es jedoch beheben, indem ich für das umschließende div ebenfalls Breite und Höhe fest lege:

#emblem {
    display: block;
    height: 100%;
    padding-right: 250px;
    margin: auto;
    border-radius: 50%;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    width: 250px;
    height: 250px;
}

 

[KateKate]

Bingo! Es funktioniert. Vielen, vielen Dank.