• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

transition flackert

@

@Alphavirus

Mitglied
Moin Leute
Ich hab hier ein ganz billiges Problem:
Wenn man mit der Maus auf das Logo hovert, zittert das nur rum.
Ich kriegs einfach nicht hin. Warscheinlich ist die Lösung ganz einfach.
Hier der Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
position: absolute;
left: 0%;
transition: left 0.3s;
}
img:hover {
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
</body>
</html>
 
Ja, man kann das so ändern, dass der Hoverbereich genau gleich den Abmessungen des Bildes ist ohne dass man feste Werte angeben muss:
Code: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        img {
            pointer-events: none;
            transition: transform 0.3s;
        }

        figure {
            display: inline-block;
            margin: 0;
            padding: 0;
        }

        figure:hover img {
            /* Bewegt sich um die eigene Breite nach rechts:
            /* transform: translateX(100%); */

            /* Bewegt sich an den rechten Rand:
            /* transform: translateX(calc(100vw - 100%)); */

            /* Bewegt sich in die Mitte: */
            transform: translateX(calc(50vw - 50%));
        }
    </style>
</head>

<body>
    <figure>
        <img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    </figure>
</body>

</html>
 
  • Angry
Reaktionen: msi
Scheint zu funktionieren. Das display: inline-block; hat den gewünschten Effekt gebracht.
Vielen Dank auch.
 
Zuletzt bearbeitet:
Was kann man machen
CSS:
transform: translateX(calc(50vw - 50%));
Wenn das alles in einem kleineren Wrap gepackt ist?
Zum Vergrößern anklicken....
Die Frage habe ich mir auch gestellt und ich habe keine Antwort, wie es mit CSS geht. Bei translate ist ja das eigene Element die Referenz für Prozentwerte und nicht das umgebende. Was natürlich immer geht ist, die Werte mit Javascript zu berechnen.
Ich erinnere mich an container units aber was ich da finde, bezieht sich nur auf queries.
 
Man kann auch weiter das hover dem CSS überlassen:
Code: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer-wrap {
            max-width: 900px;
            margin: auto;
            border: 2px solid lightblue;
        }

        #inner-wrap {
            display: inline-block;
        }

        #inner-wrap img {
            transition: transform 0.5s;
            pointer-events: none;
        }

        #inner-wrap:hover img {
            /* Bewegt sich um die eigene Breite nach rechts:
            /* transform: translateX(100%); */

            /* Bewegt sich an den rechten Rand: */
            transform: translateX(calc(var(--w-outer-wrapper) - 100%));

            /* Bewegt sich in die Mitte: */
            /* transform: translateX(calc(var(--w-outer-wrapper) / 2 - 50%)); */
        }
    </style>
</head>

<body>
    <div id="outer-wrap">
        <div id="inner-wrap">
            <img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
        </div>
    </div>
    <script>
        const
            root = document.querySelector(':root'),
            outerWrapper = document.querySelector('#outer-wrap');
        function updateIt() {
            wOuterWrapper = outerWrapper.offsetWidth;
            root.style.setProperty('--w-outer-wrapper', wOuterWrapper + 'px');
        }
        updateIt();
        window.addEventListener("resize", updateIt);
    </script>
</body>

</html>
 
  • Angry
Reaktionen: msi
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben