CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

Tamaleus · 6. Januar 2024

Hallo allerseits

Erbitte Hilfe beim Zentrieren von Bildern beim Hovern, mittig von Gerät und nicht von Bilddatei ausgehend.

Was ich bisher habe, ist folgendes:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To hover image centered on Device</title>
    <style>
        center{
            margin-top: 100px;
        }
        .myzoomimg img{
            position: relative;
            transition: 1s;
        }
        .myzoomimg img:hover{
            z-index: 1;
            display: block;
            margin: 0 auto;
            transform: scale(1.6);
        }
    </style>
    </head>
    <body>
        <center>
            <div class="myzoomimg">
                <img src="pic1-600.jpg" width="30%" height="300px"> 
            </div>
        </center>
    </body>
</html>

Alles anzeigen

Vielen Dank im Voraus für jegliche Schützenhilfe.

Greez

Tamaleus

nextuser · 6. Januar 2024

Hi Tamaleus,

zum einen ist "center" ausgestorben und sollte nicht mehr verwendet werden.

Zum anderen müssen die Abmessungen des Elterncontainers entsprechend sein, wenn man ein Bild drinne mittig vom Gerät aus zentrieren will.

Sind die Abmessungen nicht 100% und verwendet man auch nicht "position: absolute", wird es wohl schlecht gehen.

Btw. ein Bildhover zoomen, aber ausgehend vom Gerät? Ist das Bild immer an der Position auf der Seite das einzige Element und "Seiten"-zentriert?

Stelle ich mir grad etwas komisch vor. Vielleicht hab ich dich auch falsch verstanden...

Tamaleus · 6. Januar 2024

@ nextuser

Danke für Deinen Input. Ich muss eingestehen, dass es sich bei dem, was ich bisher hinbekommen habe, um den Rest unzähliger Versuche handelt. Ich lasse mich ja gerne beraten. Daher mein Input hier. Zum Gedanken dahinter: Wenn auf einer Seite ein kleines Bild fast am linken Rand steht und dieses mittig über diesem Bild vergrössert wird, hängt der linke Teil des vergrösserten Bildes über den linken Bildschirm-Rand hinaus. Und daher soll das vergrösserte Bild in der Mitte des Gerätes platziert und von dort aus vergrösserte werden. Vielleicht kannst Du mir zeigen, wie das geht.

nextuser · 6. Januar 2024

Reden wir jetzt wirklich von dem Hover-Effekt (Maus drüber. | Sieht das dann nicht komisch aus, wenn die Vergrößerung dann so versetzt ist)?

Oder soll das Bild bei einem Klick (flächenfüllend) vergrößert werden?

Tamaleus · 6. Januar 2024

nextuser

Lass uns bitte nicht darüber diskutieren, was der Hintergrund ist. Ich habe versucht, das zu erklären. Mehr kann ich dazu nicht sagen. Frage ist nun, ob Du mir helfen kannst.

Sempervivum · 6. Januar 2024

Ein Bild kannst Du so zentrieren:

Code

        body, html {
            height: 100%;
        }

        body {
            position: relative;
        }

        .myzoomimg img{
            transition: 1s;
        }
        .myzoomimg img:hover{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: auto;
        }

Alles anzeigen

Ungetestet, aber so habe ich es schon häufig gemacht.

Dies ist zunächst mal eine sehr einfache Lösung. Wenn Du erreichen möchtest, dass das Bild von der alten, kleinen Positon ausgehend an die neue, vergrößerte, explodiert, wird es ein wenig komplizierter.

nextuser · 6. Januar 2024

Zitat von Tamaleus

nextuser
Lass uns bitte nicht darüber diskutieren, was der Hintergrund ist. Ich habe versucht, das zu erklären. Mehr kann ich dazu nicht sagen. Frage ist nun, ob Du mir helfen kannst.

Das war keine Diskusion, sondern eine Nachfrage. Und "position: absolute" hatte ich auch schon Anfangs erwähnt um dir zu helfen.

Was bist denn du so gereizt?

Tamaleus · 6. Januar 2024

Hallo Sempervivum

Vielen Dank für Deine Hilfe. Ich habe den von Dir angegebenen Teil in meinem "<style>"-Bereich im <head> wie ganz oben gezeigt, eingefügt. Schon im Preview (arbeite mit Visual Studio Code), aber auch in der in den Browser (Chrome und Edge, bei Firefox wird bei Maus-over gar kein weiteres Bild angezeigt, bzw. ist nicht sichtbar) geladenen Datei erhalte ich ein unheimliches "Ge-Flacker" zwischen dem Ausgansbild oben in der Mitte und dem "ge-hoverten" Bild, welches sich bei mir aber noch nicht in der Mitte des Bildschirmes zeigt, sondern mit der linken oberen Ecke in der Mitte des Bildschirmes (nach rechts unten) hängt. Auch wenn ich das Label <center></center> vor und nach dem <div> deaktiviere, ändert das am Problem selbst nichts. Das Ausgangsbild wird dann bloss anstatt in der Mitte oben links angezeigt. Doch das Geflacker erscheint nach wie vor. Und das Bild ist auch nicht mittig des Bildschirms, sondern hängt quasi mit seiner linken oberen Ecke in der Mitte des Bildschirms (nach unten rechts)

Sempervivum · 6. Januar 2024

Das Geflacker wundert mich nicht, es ist so zu erklären:

Wenn das Bild vergrößert wird, bewegt es sich auch in die Mitte und dann liegt die Maus nicht mehr drauf --> :hover trifft nicht mehr zu und das Bild wird wieder kleiner usw.

Ein typisches Problem bei Hover-Effekten. Es gibt noch einen anderen Nachteil beim Hover: Heute ist die Mehrzahl der Benutzer mit Touch-Geräten unterwegs und dabei gibt es kein Hover. Daher empfehle ich, statt des :hover in CSS das Klick-Event in Javascript zu verwenden. Dann wird das Bild stabil an seiner Position stehen bleiben bis ein Close-Button gedrückt wird oder außerhalb des Bildes geklickt wird, z. B.

nextuser · 6. Januar 2024

Zitat von Sempervivum

Ein typisches Problem bei Hover-Effekten. Es gibt noch einen anderen Nachteil beim Hover:...

Ja und genau deshalb hatte ich ja auch die Nachfrage gestellt.

Es ging mir nicht darum, ihm etwas abzusprechen, sondern um die Nachteile beim Hover!

Tamaleus · 7. Januar 2024

Moin Sempervivum

Danke für Deine Anregung betr. JS. Werde ich dann so befolgen, weiss bloss leider gar nicht, wie das zu bewerkstelligen ist. Ausserdem endet Deine letzte Mitteilung abrupt, so dass ich denke, es könnte nach "außerhalb des Bildes geklickt wird, z. B." noch etwas fehlen. Oder war das so beabsichtigt?

Sempervivum · 7. Januar 2024

Zitat

es könnte nach "außerhalb des Bildes geklickt wird, z. B." noch etwas fehlen. Oder war das so beabsichtigt?

Nein, war so beabsichtigt. Ich hätte auch schreiben können:

Zitat

bis z. B. ein Close-Button gedrückt wird oder außerhalb des Bildes geklickt wird.

Ich zeige dir später, wie das geht mit dem Klick-Event.

Sempervivum · 7. Januar 2024

... hier eine einfache Lösung mit Javascript und Klick. Das ist noch stark verbesserungsfähig, denn so verschwindet das Bild an seiner ursprünglichen Position und die anderen verschieben sich.

HTML

<!DOCTYPE html>
<html>
<style>
    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
        position: relative;
    }

    img {
        display: block;
        width: 200px;
        height: auto;
        transform: translate(0, 0);
    }

    img.large {
        position: absolute;
        width: 80%;
        height: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>

<body>
    <img src="images/dia0.jpg">
    <img src="images/dia1.jpg">
    <img src="images/dia2.jpg">
    <script>
        // Eventlistener für Klick irgend wo auf der Seite registrieren
        window.addEventListener('click', event => {
            // Gibt es ein großes Bild und wurde außerhalb geklickt?
            if (document.querySelector('img.large') && !event.target.matches('img.large')) {
                // Bild wieder klein machen indem wir die Klasse "large" löschen:
                const
                    img = document.querySelector('img.large');
                img.classList.remove('large');

            } else {
                // Wurde auf ein kleines Bild geklick?
                if (event.target.matches('img:not(.large)')) {
                    // Bild groß machen indem wir die Klasse "large" hinzu fügen:
                    const
                        img = event.target;
                    img.classList.add('large');
                }
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Tamaleus · 7. Januar 2024

Vielen Dank! Verstehe, was Du meinst. Nicht anfreunden kann ich mich damit, dass das geklickte (kleine) Bild verschwindet, was die gesamte Seite (die z. T. recht gross ist) im Erscheinungsbild ändert. Dann ist auch für mich gewöhnungsbedürftig, dass ich *nicht* auf das grosse Bild klicken muss, um es wieder zu verkleinern, sondern gerade ausserhalb dessen.

Ich bin mir bewusst, dass es meist nicht gut daher kommt, erst um Rat zu bitten und es dann doch selber besser zu wissen. So ist es auch nicht gemeint. Ich denke bloss, mir würde nur ein ganz kleines Stück fehlen, weshalb ich mich erdreiste, hier anbei den letzten Stand der Dinge anzufügen. Mouse - hover - enlarged image. Und bei Klick auf (grosses) Bild, zurück in Ausgangssituation. Es fehlt halt bloss, dass das vergrösserte Bild - und ich denke jetzt dürfte allen Lesern klar sein, warum es so sein soll - mittig des Bildschirms gezoomt werden soll.

Wäre sehr dankbar, gezeigt zu bekommen, wie das Zoomen von der Mitte des Gerätes aus gehen würde. Dessen, dass heute die Mehrheit mit Handhelds unterwegs ist, bin ich mir bewusst.

Sempervivum · 7. Januar 2024

Versuche dieses, so explodiert das Bild von der Mitte aus und verschwindet, wenn man drauf klickt:

HTML

<!DOCTYPE html>
<html>
<style>
    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
        position: relative;
    }

    img.small {
        display: block;
        width: 200px;
        height: auto;
        transform: translate(0, 0);
    }

    figure.ovl {
        margin: 0;
        position: absolute;
        width: 0;
        height: 0;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 1s linear;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    figure.ovl.large {
        position: absolute;
        width: 80%;
        height: 80%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    figure.ovl img {
        width: auto;
        height: 100%;
    }

    figure.ovl img.fitVertically {
        width: 100%;
        height: auto;
    }
</style>
</head>

<body>
    <img class="small" src="images/dia0.jpg">
    <img class="small" src="images/dia1.jpg">
    <img class="small" src="images/dia2.jpg">
    <figure class="ovl">
        <img>
    </figure>
    <script>
        const
            ovl = document.querySelector('figure.ovl'),
            largeImg = ovl.querySelector('img');
        // Eventlistener für Klick irgend wo auf der Seite registrieren
        window.addEventListener('click', event => {
            // Wurde innerhalb eines großes Bildes geklickt?
            if (event.target.matches('figure.ovl.large img')) {
                // Bild wieder klein machen indem wir die Klasse "large" löschen:
                ovl.classList.remove('large');
            } else {
                // Wurde auf ein kleines Bild geklick?
                if (event.target.matches('img.small')) {
                    // Seitenverhältnisse von Body und Bild ermitteln:
                    const
                        boxBody = document.querySelector('body').getBoundingClientRect(),
                        ratioBody = boxBody.width / boxBody.height,
                        boxImg = event.target.getBoundingClientRect(),
                        ratioImg = boxImg.width / boxImg.height;
                    // Bild entspr. Seitenverhältnis einpassen:
                    if (ratioImg > ratioBody) {
                        largeImg.classList.add('fitVertically');
                    }
                    // Bild in Overlay eintragen:
                    largeImg.src = event.target.src;
                    // Bild groß machen indem wir die Klasse "large" zum Overlay hinzu fügen:
                    ovl.classList.add('large');
                }
            }
        });
    </script>
</body>

</html>

Alles anzeigen

Tamaleus · 7. Januar 2024

Ich ziehe meinen Hut, oh Erleuchteter. Danke Dir recht herzlich für Deine ganze Arbeit! Verstehe also, dass "auf-zoomen" an anderer Stelle - mit meinem Ansatz - nicht möglich ist.

Sempervivum · 7. Januar 2024

Zitat

Verstehe also, dass "auf-zoomen" an anderer Stelle - mit meinem Ansatz - nicht möglich ist.

Meinst Du mit Hover? Das ist allerdings problematisch. Wenn Du etwas anderes meinst, könnte gelten "geht nicht, gibt's nicht" und ich würde gern gucken ob es so auch möglich ist.

nextuser · 7. Januar 2024

Eine andere Möglichkeit wäre z.B.:

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="my-zoom-on-hover.css" />
        <script src="my-zoom-on-hover.js"></script>
    </head>
    <body>
        <div id="pics">
            <img src="pic1-600.jpg">
            <img src="pic2.jpg">
            <img src="pic8.jpg">
        </div>
        <div id="img_container">
            <img>
        </div>
    </body>
</html>

Alles anzeigen

CSS

html, body
{
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}

#pics
{
    display: flex;
    flex-direction: column;
    align-items: start;
}
#pics>img
{
    width: 300px;
}

#img_container
{
    display: none;
    position: absolute;
    transition: all 1s;
    justify-content: center;
    align-items: center;
}
#img_container>img
{
    width: 100%;
    height: auto;
    transition: all 1s;
}

Alles anzeigen

JavaScript

var C_OBJ =
{
    img_list: null,
    img_container: null,
    img_c_img: null
};

function show_img(ind,show = true)
{
    let is_landscape = screen.orientation.type.includes("landscape");
    let img_rect = C_OBJ.img_list[ind].getBoundingClientRect();
    let obj = C_OBJ.img_container;
    let c_img = C_OBJ.img_c_img;

    if(show)
    {
        obj.style.left = img_rect.x + "px";
        obj.style.top = img_rect.y + "px";
        obj.style.width = img_rect.width + "px";
        obj.style.height = img_rect.height + "px";

        c_img.src = C_OBJ.img_list[ind].src;
        c_img.style.width = "100%";
        c_img.style.height = "100%";

        obj.style.display = "flex";

        setTimeout(() =>
        {
            obj.style.left = "0";
            obj.style.top = "0";
            obj.style.width = "100%";
            obj.style.height = "100%";

            c_img.style.width = (is_landscape) ? "auto" : "60%";
            c_img.style.height = (is_landscape) ? "80%" : "auto";
            c_img.addEventListener("click",() => {show_img(ind,false);},{once:true})
        },1);
    }
    else
    {
        obj.style.left = img_rect.x + "px";
        obj.style.top = img_rect.y + "px";
        obj.style.width = img_rect.width + "px";
        obj.style.height = img_rect.height + "px";

        c_img.style.width = (is_landscape) ? "auto" : "100%";
        c_img.style.height = (is_landscape) ? "100%" : "auto";

        setTimeout(() => {obj.style.display = "none";},1000);
    }
}

window.onload = () =>
{
    C_OBJ.img_list = document.querySelectorAll("#pics>img");
    C_OBJ.img_container = document.querySelector("#img_container");
    C_OBJ.img_c_img = document.querySelector("#img_container>img");

    for(let i=0; i<C_OBJ.img_list.length; i++)
    {
        C_OBJ.img_list[i].addEventListener("click",() => {show_img(i);});
    }
}

Alles anzeigen

nextuser · 7. Januar 2024

Wollte meinen Post oben noch bearbeiten, um Kommentare zu ergänzen.

Geht aber nicht, da ich keine Berechtigung habe???

Naja, deshalb hier nochmal die JS:

JavaScript

var C_OBJ =
{
    // Nicht nötig, mag es aber mehrfach verwendete Elemente einmal zu "initialisieren"
    img_list: null,
    img_container: null,
    img_c_img: null
};

function show_img(ind,show = true)
{
    let is_landscape = screen.orientation.type.includes("landscape");
    let img_rect = C_OBJ.img_list[ind].getBoundingClientRect();
    let obj = C_OBJ.img_container;
    let c_img = C_OBJ.img_c_img;

    if(show)
    {
        // Box an das angeklickte Bild anpassen
        obj.style.left = img_rect.x + "px";
        obj.style.top = img_rect.y + "px";
        obj.style.width = img_rect.width + "px";
        obj.style.height = img_rect.height + "px";

        // Bild in die Box setzen
        c_img.src = C_OBJ.img_list[ind].src;
        c_img.style.width = "100%";
        c_img.style.height = "100%";

        obj.style.display = "flex";

        // Damit die Animation funktioniert, einen gaaaanz kleinen Moment nachdem die
        // Abmessungen der Box & des Bildes gesetzt wurden, warten.
        setTimeout(() =>
        {
            // Box auf ganze Anzeige vergrößern
            obj.style.left = "0";
            obj.style.top = "0";
            obj.style.width = "100%";
            obj.style.height = "100%";

            // Bild jetzt entsprechend der Abmessungen & Orientation der Anzeige final anpassen
            c_img.style.width = (is_landscape) ? "auto" : "60%";
            c_img.style.height = (is_landscape) ? "80%" : "auto";

            // Einmaligen Event (once) an das Bild setzen zum schließen
            c_img.addEventListener("click",() => {show_img(ind,false);},{once:true})
        },1);
    }
    else
    {
        // Das ganze umgekehrt...
        obj.style.left = img_rect.x + "px";
        obj.style.top = img_rect.y + "px";
        obj.style.width = img_rect.width + "px";
        obj.style.height = img_rect.height + "px";

        c_img.style.width = (is_landscape) ? "auto" : "100%";
        c_img.style.height = (is_landscape) ? "100%" : "auto";

        // Hier wichtig, ausblenden NACHDEM die Box wieder auf Bild-Position & Abmessung ist.
        // Hier genau die Zeit, wie im CSS!
        setTimeout(() => {obj.style.display = "none";},1000);
    }
}

window.onload = () =>
{
    C_OBJ.img_list = document.querySelectorAll("#pics>img");
    C_OBJ.img_container = document.querySelector("#img_container");
    C_OBJ.img_c_img = document.querySelector("#img_container>img");

    for(let i=0; i<C_OBJ.img_list.length; i++)
    {
        C_OBJ.img_list[i].addEventListener("click",() => {show_img(i);});
    }
}

Alles anzeigen

nextuser · 7. Januar 2024

Kleine Anpassung:

Ich habe das Seitenverhältnis nicht vollständig beachtet und nur mit "Orientation" gearbeitet, daher

so wie bei Sempervivum angepasst:

JavaScript

var C_OBJ =
{
    // Nicht nötig, mag es aber mehrfach verwendete Elemente einmal zu "initialisieren"
    img_list: null,
    img_container: null,
    img_c_img: null
};

function show_img(ind,show = true)
{
    let body_rect = document.querySelector("body").getBoundingClientRect();
    let img_rect = C_OBJ.img_list[ind].getBoundingClientRect();
    let fit_v = ((img_rect.width / img_rect.height) > (body_rect.width / body_rect.height));
    let obj = C_OBJ.img_container;
    let c_img = C_OBJ.img_c_img;

    if(show)
    {
        // Box an das angeklickte Bild anpassen
        obj.style.left = img_rect.x + "px";
        obj.style.top = img_rect.y + "px";
        obj.style.width = img_rect.width + "px";
        obj.style.height = img_rect.height + "px";

        // Bild in die Box setzen
        c_img.src = C_OBJ.img_list[ind].src;
        c_img.style.width = "100%";
        c_img.style.height = "100%";

        obj.style.display = "flex";

        // Damit die Animation funktioniert, einen gaaaanz kleinen Moment nachdem die
        // Abmessungen der Box & des Bildes gesetzt wurden, warten.
        setTimeout(() =>
        {
            // Box auf ganze Anzeige vergrößern
            obj.style.left = "0";
            obj.style.top = "0";
            obj.style.width = "100%";
            obj.style.height = "100%";

            // Bild jetzt entsprechend der Abmessungen & Orientation der Anzeige final anpassen
            c_img.style.width = (fit_v) ? "80%" : "auto";
            c_img.style.height = (fit_v) ? "auto" : "80%";

            // Einmaligen Event (once) an das Bild setzen zum schließen
            c_img.addEventListener("click",() => {show_img(ind,false);},{once:true})
        },1);
    }
    else
    {
        // Das ganze umgekehrt...
        obj.style.left = img_rect.x + "px";
        obj.style.top = img_rect.y + "px";
        obj.style.width = img_rect.width + "px";
        obj.style.height = img_rect.height + "px";

        c_img.style.width = (fit_v) ? "100%" : "auto";
        c_img.style.height = (fit_v) ? "auto" : "100%";

        // Hier wichtig, ausblenden NACHDEM die Box wieder auf Bild-Position & Abmessung ist.
        // Hier genau die Zeit, wie im CSS!
        setTimeout(() => {obj.style.display = "none";},1000);
    }
}

window.onload = () =>
{
    C_OBJ.img_list = document.querySelectorAll("#pics>img");
    C_OBJ.img_container = document.querySelector("#img_container");
    C_OBJ.img_c_img = document.querySelector("#img_container>img");

    for(let i=0; i<C_OBJ.img_list.length; i++)
    {
        C_OBJ.img_list[i].addEventListener("click",() => {show_img(i);});
    }
}

Alles anzeigen

CSS: Bilddatei bei hover mittig zentrieren (mittig Gerät)

Jetzt mitmachen!

Teilen

Tags