Bilder von CSS mit Lightbox

  • Hallo,

    ich habe ein paar Bilder mit CSS auf meiner Homepage eingebunden. Nun will ich diese
    Bilder mit einer Lightbox vergrößern.

    Im Internet finde ich leider nur Anleitungen wie ich die Lightbox auf Bilder
    bringe die direkt in der HTML Datei eingebunden wurden.

    Kann mir bitte jemand sagen wie ich genau das gleiche für mit CSS eingebunden
    Bildern mache?:)


    Schon mal vielen Dank :)

  • Wie bindest du die Bilder denn bitte via css ein?! :0
    Background?
    hmm.. für ne echte Lightbox braucht es wohl n bisschen Script.
    Und was ist daran so schlimm sie via HTML einzubinden?

  • Ja habe mit Css einen Hintergrund eingefügt.
    Wenn ich die Bilder mit HTML einfüge wie kann ich dann die Bilder in CSS ansprechen?

  • Entweder du gibts dem Bild einfach eine Klasse oder via img

    CSS
    .Klasse{
        width: 200px;
    }
    Img{
        box-shadow: 5px 5px 7px black;
    }
  • Hi,
    bei Bildern ist das immer ein bisschen tricky in der Frage, ob via HTML und CSS einbinden.

    Faustregel, die für alles gilt: Inhalt = HTML, Design = CSS, auch bei Bildern; Sind sie für Inhalt da, zB bei der Visualisierung eines Artikels (Wikipediabilder zB), als Inhalt einer Galerie (so wie bei dir vermute ich mal),dann HTML, dienen sie nur dem Design (zB zur Verdeutlichung des Homelinks, als Hintergrundbild, ...) dann via CSS content oder background-Einbindung.

    Und wie man Bilder im HTML anspricht hat ja Wolf schon schön kurz und gut erklärt. Ansonsten, via CSS einbinden:

    CSS
    #html-content {
        background: url(pfad/zum/hintergrund.bild); /* als Hintergrundbild */
    }
    
    
    
    
    #htmlcontent:before { /* es geht natürlich auch :after um es danach einzufügen */
        content: url(pfad/zum/verdeutlichungs.bild); /* zB für ein Haus beim Homelink */
    }
  • Alles klar vielen Dank für eure Antworten :)
    Ich habe die Bilder jetzt direkt in html eingebunden und dann mit Css positioniert.

Jetzt mitmachen!

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