CSS3: Visualizzare il portfolio in una griglia di immagini con anteprima

È possibile realizzare un portfolio accattivante in moltissimi modi e gli elementi che entrano in gioco nella sua creazione sono diversi e molteplici.

Molto importante è, innanzitutto, considerare il tipo di lavoro freelance che svolgi: va deciso se dare più importanza alla qualità e quindi far visualizzare pochi progetti ma eccellenti, oppure alla quantità e in questo caso mostrare tutti i tuoi lavori.

Per tutte le tue necessità ci sono diverse soluzioni. Oggi ti propongo quella che permette di visualizzare il portfolio in una griglia di immagini responsive; nel momento in cui clicchiamo sull’immagine visualizziamo in un box sottostante l’immagine stessa con informazioni dettagliate sul lavoro realizzato.

Il tutto viene sviluppato senza codice Jquery e questa è la notizia che può sorprendere. 

L’elemento chiave che permette di utilizzare solo codice CSS3 + HTML5 è il selettore :target che permette di visualizzare il box delle informazioni aggiuntive che in partenza abbiamo impostato con opacità pari a 0 e altezza pari a 0 per nasconderlo.

Grazie alle media query la griglia si adatta alle varie risoluzioni dello schermo e per questo dobbiamo inserire nel tag head la proprietà viewport e soprattutto il codice condizionale per far funzionare il tutto anche su IE.

1 – CREIAMO LA GRIGLIA – STRUTTURA

Creiamo la griglia aggiungendo una sezione che funzionerà da contenitore all’interno del quale inseriremo il tag “article” con un suo id corrispondente al numero dell’immagine.

<section>
     <article id=“01”>
          ….

     </article>

     <article id=“02”>
     
          …...

     </article>

 </section>


…………….
     
</section>

Dopo inseriamo altre informazioni aggiuntive di ogni genere. Io ho aggiunto un titolo e una descrizione

<article id="01">
      	<a href="#01"><img src="images/01.jpg" /></a>
      	<div class="info">
        	<div class="description">
          	<h1>Immagine 1 - By Mads Berg</h1>
          	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in massa ultrices diam lobortis convallis quis in risus. Phasellus a augue vitae sapien condimentum condimentum quis at eros. In nisl lacus, pharetra nec commodo quis, accumsan ac sapien.</p>
        	</div>
          
        	<a class="maggioriInfo" href="https://bit.ly/suYdXh">LINK AUTORE</a>
      	</div>
     	</article>

Cosa molto importante è non lasciare spazi tra la chiusura del tag article e l’apertura del nuovo tag article perché nel css useremo la proprietà display:inline-block 

</article><article id="02">

2 – CSS GENERALE

Dopo aver inserito il file css e aver inserito alcuni tag di reset possiamo passare allo stile dei primi elementi.

Cominciamo dallo stile generale per creare una griglia centrata e attribuiamogli una larghezza e una posizione relativa:

 section {
      max-width: 1000px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
    }

Adesso impostiamo lo stile dei box immagine con la proprietà display:inline-block in modo che le immagini siano una accanto all’altra come un blocco con una dimensione e larghezza.

Inoltre impostiamo una larghezza del 50% per far si che la griglia sia responsive e i box si adattino facilmente alla risoluzione dello schermo. Infine impostiamo un allineamento verticale al margine superiore:

section article{

vertical-align:top;
display: inline-block;
width:50%;
margin-bottom:-4px;
}

Impostiamo la larghezza dell’immagine al 100% del box che contiene l’immagine stessa:

section img
{
width:100%;
height:auto;
padding:4px;
{

3 – CSS DEL BOX ANTEPRIMA

Impostiamo il box informazioni anteprima che mostrerà le informazioni sotto il box immagine una volta cliccata l’immagine. L’elemento fondamentale di questa griglia immagini che ci permette di cliccare sulla thumbnail e di visualizzare le informazioni nel box posto sotto l’immagine senza dover usare il codice jquery è il selettore :target.

La sezione info è quella che dobbiamo visualizzare al click dell’immagine per cui allo stato di partenza dobbiamo nasconderla con la proprietà opacity:0.

section .info
{
width:150%;
padding: 3em 0;
margin: 0 10%;
position:relative;
float:left;
opacity:0;
height:0;
font-size:0;
}

Usiamo il selettore :target per rivelare l’informazione impostando un’altezza auto e una opacità pari a 1. Questo ci permette di visualizzare il box al momento del click.


section article:target .info {
      height: auto;
      font-size: 100%;
      opacity: 1;
      -webkit-transition: .4s .4s opacity;
    }

Usiamo i selettori nthchild per selezionare le informazioni numero 1 di ogni 2 e le informazioni numero 2 di ogni 2; però, mentre la prima va bene così come è posizionata, la seconda deve essere spostata a sinistra aggiungendo un valore di -100%;

article:nth-child(2n+1) .info{
left:0
}

article:nth-child(2n+2) .info{
left:-100%
} 

E anche per evidenziare il box al quale si riferisce l’informazione:

section article:target img {
      border-bottom:4px solid #F36; 
      -webkit-transition: .5s;
	  -moz-transition: .5s;
	  -o-transition: .5s;
    }

Adesso dobbiamo anche qui usare i selettori nth-child  per selezionare la 3 informazione di ogni 3. In tal caso la prima rimane così com’è posizionata a un valore di 0, la seconda come detto prima ad un valore di -100%, la terza a un valore di -200%.

article:nth-child(3n+1) .info{
left:0
}

article:nth-child(3n+2) .info{
left:-100%
} 

article:nth-child(3n+3) .info{
left:-200%
}  

Conclusione

È possibile personalizzare la griglia immagini in qualsiasi modo, per esempio impostando il box descrizione al 50% oppure al 100% e inserire altre informazioni più dettagliate e esaustive per il cliente.

Io lo trovo molto utile per il portfolio ma è possibile usarlo anche in altri ambiti come quello degli e commerce per visualizzare più dettagli per i prodotti.

A questo link trovate l’esempio live, mentre a questo è possibile scaricare il codice completo. 

Se utilizzate questo metodo nei vostri lavori o se lo avete già utilizzato, lasciatemi il link nei commenti!

Tag: , ,

L'autore

Web designer e front-end developer freelance a partire dal 2013 con l'obiettivo di crescere professionalmente e di affrontare nuove ed entusiasmati sfide. Ho studiato graphic design allo IED di Milano ma mi occupo in particolare di disegnare e sviluppare siti web in Html5 + Css3 e jquery, siti web responsive e con effetto parallasse. Amo anche scrivere e per questo ho anche un mio blog personale che trovate sul mio sito-web.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

6 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo