Startseite Skripte für das Wintersemester 2017/18 Webdesign Responsive Images, Transitions & Javascript Übung/Hausaufgabe


Übung/Hausaufgabe

Schaut Euch dazu die Anmerkungen und Code-Beispiele bei meinem Slide „Lightbox-Bilder“ an!

Briefing

  1. Ladet Euch das Übungspaket herunter
  2. Der HTML- und Javascript-Code ist fertig – Ihr müsst aber den CSS-Code noch erstellen
  3. Schaut Euch die Vorlagen garda-popup-1.jpg und garda-popup-2.jpg an
  4. Erstellt für die Hover-Funktion eine Animation, bei der die Figcaption diesmal von links animiert auf das Bild geschoben wird
  5. Klickt man auf ein Bild, wird in einer „Lightbox“ das große Bild darüber dargestellt – siehe garda-popup-2.jpg