Overlay mit Bild in voller Größe

Diskutiere Overlay mit Bild in voller Größe im CSS Forum im Bereich Programmierung; Hallo, gibt es eine einfache Lösung, ein kleineres Bild mit Klick in einem Overlay in voller Größe mit abgedunkeltem Hintergrund erscheinen zu...
Neues Thema erstellen Antworten
C

Chemnitzer

Member
Beiträge
6
Punkte Reaktionen
0
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ß
 
basti1012

basti1012

Well-known member
Beiträge
242
Punkte Reaktionen
18
Habe mir den Code der Seite jetzt nicht angeschaut was die benutzen, aber sowas kannst du mit Fancybox machen.
http://fancybox.net/

Oder selber bauen. Sowas sollte mit etwas CSS auch selbst zu erstellen sein ,ohne irgendwelche Fremdtools einzubauen.
Wer das aber nicht will oder kann, ist mit Fancybox gut aufgehoben
 
C

Chemnitzer

Member
Beiträge
6
Punkte Reaktionen
0
Danke, ich werde es mir mal anschauen.


Grüße
 
S

Sempervivum

Well-known member
Beiträge
353
Punkte Reaktionen
52
Du wolltest doch eine einfache Lösung. Warum nimmst Du dann etwas, das deine Anforderung nur halb erfüllt und versuchst, das aufzubohren?
 
basti1012

basti1012

Well-known member
Beiträge
242
Punkte Reaktionen
18
Sehe ich das richtig, dass du in deinem Beispiel keine Scripte oder CSS eingebunden hast? Benutzte Beautycode nicht oft?
Für mich sieht das schon so aus , was ich am Anfang auch schon sagte, das man sowas im kleinen Stil auch selber bauen kann.

Du solltest jetzt aber wissen, was du willst, selber bauen oder was Fertiges nutzen.
Fancybox ist die einfachere Lösung, weil das läuft auf allen Endgeräten wie Handy, Laptop und Tablett.
Beim selber bauen muss man das natürlich auch beachten und kann hin und wieder nervig werden
 
S

Sempervivum

Well-known member
Beiträge
353
Punkte Reaktionen
52
welche keine Skripte erfordert
Zum Vergrößern anklicken....
Das scheint dir ja sehr wichtig zu sein - warum?

Das Codepen ist weniger zu empfehlen:
  • Header ist mit dem veralteten float aufgebaut.
  • Es werden keine semantischen Tags verwendet.
  • Es weist die typischen Nachteile einer Lösung nur mit CSS auf: Für jedes Bild ist ein HTML für die Lightbox erforderlich. Dadurch wird der Code unübersichtlich und schwer zu pflegen. Die Verwendung von :target ist zwar weit verbreitet aber Trickprogrammierung und kann zu unerwünschten Nebeneffekten führen.
 
R

Ritchy

New member
Beiträge
1
Punkte Reaktionen
0
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
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>
Erstelle eine CSS-Datei und füge folgenden Code hinzu:
css
Copy 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%;
}
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
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";
};
Damit sollte das kleine Bild mit Klick in einem Overlay in voller Größe mit abgedunkeltem Hintergrund erscheinen.
 
C

Chemnitzer

Member
Beiträge
6
Punkte Reaktionen
0
Danke! Kann dem schwebenden Bild dann noch ein Untertitel hinzugefügt werden?
 
Thema:

Overlay mit Bild in voller Größe

Oben Unten