Overlay mit Bild in voller Größe

  • Hallo,

    gibt es eine einfache Lösung, ein kleineres Bild mit Klick in einem Overlay in voller Größe mit abgedunkeltem Hintergrund erscheinen zu lassen, so wie es zum Beispiel auf dieser Website in ihren Bildberichten gemacht wird: https://iho.hu/hirek/a-szurrealitas-csimborasszoja-161027


    Jedoch sollte es kein Pop-up sein, was ja häufig als vermeintliche Werbung sofort blockiert wird. Alle Anleitungen für ähnliche hover-Effekte, die ich im Internet gefunden habe, haben bisher nicht wirklich gut gewirkt, nachdem ich sie dann auf meiner Seite eingebunden hatte; oft waren die Bilder verschoben oder man musste noch scrollen, jedoch habe ich nicht die Angaben gefunden, um das zu ändern.



    Gruß

  • Hi,


    ne ganz einfache Lösung wäre:

    • Einen simplen Container mit absoluter Position vollflächig und mit dem gewünschten, abgedunkelten Hintergrund erstellen
    • Darin einen weiteren Container mit einem img-Tag & einem Button (zum Schließen) als Kindelemente erstellen
    • Bei einem Klick auf ein Thumbnail, entsprechendes Bild in das img-Tag laden, Container anzeigen & die Abmessungen des Bildes für einen schönen Effekt mit einer CSS-Animation auf die finale Größe animieren...

    Den zweiten Container könnte man sogar auch weglassen, dann wäre es noch einfacher...

    Einmal editiert, zuletzt von nextuser () aus folgendem Grund: Um letzten Satz ergänzt...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!