Galleria Immagini con Flexbox

Galleria Immagini con Flexbox

Ciao Ragazzi!

Nel video tutorial di oggi parleremo di Flexbox.

Flexbox è un modello CSS, progettato per creare layout flessibili che si adattano alle dimensioni disponibili e quindi alle dimensioni del viewport e dello schermo, a differenza di Grid, però permette di gestire una dimensione alla volta, cioè si possono realizzare layout che si estendono in righe o in colonne. Permette con estrema facilità, grazie alle sue proprietà,  di allineare e giustificare elementi flessibili all’interno di contenitori flessibili.

Inoltre, flexbox può avvolgere elementi su più righe per ottenere una struttura apparentemente simile a una griglia.

Realizzeremo una galleria di immagini che grazie alla proprietà CSS display:flex, si dispongono in righe e colonne, che si adattano automaticamente alle dimensioni del viewport;

Iniziamo subito creando come sempre la nostra struttura HTML di base, che contiene il link per richiamare il foglio di stile anch’esso con delle impostazioni di base.

All’interno del body, inseriamo un div container al quale assegniamo un padding di 40px per top e bottom, e 5% per left e right;

Inseriamo l’h1 del progetto con classe container__titolo, e come testo scriviamo Galleria Immagini con Flexbox

Spostiamoci nel CSS e stilizziamo il titolo h1

Dopo l’ h1, sempre all’interno di container, inseriamo un tag ul con un list-item(<li>), all’interno del quale posizioniamo un tag img;

Come valore dell’attributo src di img, inseriamo il nome della prima immagine che vogliamo caricare: img1.jpeg

Dopo img, inseriamo un div con classe cover-img e al suo interno uno span con il testo che vogliamo sia visualizzato al posizionamento del mouse sull’immagine.

Portiamoci sul CSS ed eliminiamo il pallino che indica l’elenco puntato, che il browser assegna di default al tag ul, inserendo la dichiarazione di stile list-style-type:none;

A questo punto, in html duplichiamo 2 volte, il tag li e tutti gli elementi al suo interno, e modifichiamo il nome dell’immagine da caricare in img2 per il secondo e img3 per il terzo.

Assegniamo all’ul, la classe container__foto, passiamo al CSS e stilizziamolo:

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:20px;

Ridimensionando la pagina, possiamo già notare che il nostro container è flessibile con elementi flessibili.

Con il selettore container__foto > li, individuiamo tutti i li all’interno di container__foto, e gli assegniamo:

flex-basis:350px;

position:relative;

cursor:pointer;

Con il selettore container__foto li omg, assegniamo a tutte le immagini le seguenti dichiarazioni:

object-fit:cover;

width:100%;

height:100%;

vertical-align:middle;

border-radius:5%;

Inseriamo le restanti 8 immagini.

Grazie al pseudo elemento after, creiamo un contenuto fittizio, dopo l’elemento ul, al quale abbiamo assegnato la classe container__foto;

Questo contenitore, al quale assegniamo la dichiarazione di stile flex-basis:350px; si posizionerà alla fine dell’ ul spingendo cosi le immagini dell’ultima riga a sinistra;

A questo punto non ci resta che occuparci dell’ hover; Stilizziamo il contenitore hover-img, e facciamo in modo che al posizionamento del cursore del mouse sopra l’immagine subisca una trasformazione di tipo scale, che insieme alla transizione di movimento, ci permetterà di ottenere l’effetto voluto.

Bene ragazzi!

Abbiamo realizzato la nostra simpatica galleria immagini con Flexbox!

Se vuoi guardare il video completo, ecco il link al mio canale YouTube.

Se vuoi scaricare il codice e i file del progetto, clicca sul tasto Download e decomprimi il file Zip.

---