In questa lezione viene costruita una galleria di immagini impaginata su tre colonne. Per raggiungere l'obiettivo vengono utilizzate le seguenti risorse:
- Viene utilizzato il grid system offerto da Bootstrap per impaginare le miniature delle foto. Le miniature vengorno organizzate il righe di tre elementi. Su schermi minori di 992 pixel (tablet verticale e smartphone) le miniature si impilano su un unica colonna.
- Per creare gli effetti legati all'evento hover del puntatore vengono utilizzate regole di stile inserite in custom.css. Le proprietà coinvolte sono:
- transition per trasformare in animazione le variazioni di stato delle varie proprietà di stile
- transform per creare l'effetto di scorrimento della didascalila e di ingrandimento e rimpicciolimento della miniatura
- opacity per la modifica della trasparenza di didascalia e immagine.
- Per creare l'effetto zoom e l'nserimento dell'immagine in una finestra pop-up al centro dello schermo viene utilizzato il plugin per jQuery Magnific Popup.
Per interagire con l'esercizio collegati a LZYvMr di Bruno Migliaretti (@magicbruno) su CodePen.