Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13605, member: 3917"]
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:

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:
[CODE=css]        #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;
        }
[/CODE]
[CODE=html]    <a id="emblem" href="example.html">
        <img class="bottom" src="images/dia0.jpg" />
        <img class="top" src="images/dia1.jpg" />
    </a>
[/CODE]
[/QUOTE]

Authentifizierung