transition flackert

@Alphavirus · Montag um 20:16

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>

Oliver77 · Montag um 20:33

Hi mal wieder ein Pen:

https://codepen.io/Oliver7777/pen/RwzzbKO

Hmm aber ich sehe grad, dass man den ganzen Bereich hovern kann, ich gucke mir das nochmal an!

https://codepen.io/Oliver7777/pen/wvLLwEW
Jetzt ist der Hoverbereich kleiner, aber bleibt links.

@Alphavirus · Dienstag um 03:30

Ja das funktioniert.
Allerdings geht der Hoverbereich über das Bild hinaus. Kann man das irgendwie ändern?

Sempervivum · Dienstag um 08:13

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>

Oliver77 · Dienstag um 12:41

Ah so funktioniert es.
War so frei es in einen Pen zu packen:

https://codepen.io/Oliver7777/pen/LYKKxpK

Was kann man machen

CSS:

 transform: translateX(calc(50vw - 50%));

Wenn das alles in einem kleineren Wrap gepackt ist?

@Alphavirus · Dienstag um 17:27

Scheint zu funktionieren. Das display: inline-block; hat den gewünschten Effekt gebracht.
Vielen Dank auch.

Sempervivum · Dienstag um 21:02

Was kann man machen
CSS:
transform: translateX(calc(50vw - 50%));
Wenn das alles in einem kleineren Wrap gepackt ist?

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.

Oliver77 · Dienstag um 23:33

So hab mal mein Beispiel mit einfachem Javascript zum Laufen gebracht.
Es gibt einen Container mit 900px Breite in dem das Logo liegt.
https://codepen.io/Oliver7777/pen/wvLLwEW

Sempervivum · Gestern um 08:46

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>

transition flackert

@Alphavirus

Neues Mitglied

Oliver77

Aktives Mitglied

@Alphavirus

Neues Mitglied

Sempervivum

Senior HTML'ler

Oliver77

Aktives Mitglied

@Alphavirus

Neues Mitglied

Sempervivum

Senior HTML'ler

Oliver77

Aktives Mitglied

Sempervivum

Senior HTML'ler

Neueste Beiträge