JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.

Auf Thema antworten

Beitrag: [QUOTE="Ritchy, post: 13693, member: 4686"] Um ein kleineres Bild mit Klick in einem Overlay in voller Größe mit abgedunkeltem Hintergrund erscheinen zu lassen, kannst Du folgende Schritte ausführen: Erstelle ein HTML-Dokument und fügen das kleine Bild hinzu: html Copy code [CODE=html]<!DOCTYPE html> <html> <head> <title>Bild Overlay</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <img src="kleines_bild.jpg" id="smallImage"> <div id="overlay"> <img src="" id="largeImage"> </div> </body> </html>[/CODE] Erstelle eine CSS-Datei und füge folgenden Code hinzu: css Copy code [CODE=css]#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: none; z-index: 999; } #overlay img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 90%; max-width: 90%;[/CODE] } Füge ein JavaScript-Code hinzu, um das Overlay anzuzeigen und das große Bild zu laden, wenn das kleine Bild angeklickt wird: javascript Copy code [CODE=javascript]let smallImage = document.getElementById("smallImage"); let largeImage = document.getElementById("largeImage"); let overlay = document.getElementById("overlay"); smallImage.onclick = function() { largeImage.src = smallImage.src; overlay.style.display = "block"; }; overlay.onclick = function() { overlay.style.display = "none"; };[/CODE] Damit sollte das kleine Bild mit Klick in einem Overlay in voller Größe mit abgedunkeltem Hintergrund erscheinen. [/QUOTE]

Authentifizierung