Creare gallerie thumbnail accattivanti con effetti hover CSS3

In questo tutorial vediamo come creare alcuni effetti hover sulle gallerie immagini in miniatura o cosiddette thumbnail. Lo scopo è sia quello di rendere accattivante la galleria che quello di aumentare l’interattività dell’utente che al passaggio del mouse riesce a ottenere effetti particolari o informazioni aggiuntive.

Grazie alle transizioni e trasformazioni Css3 possiamo realizzare veramente tanti effetti, come scalare l’immagine, traslarla, ruotarla o dargli un’altra forma particolare.

#1 –  EFFETTI SU IMMAGINE

Creiamo la nostra griglia immagini in miniatura di 4×4 righe per colonna e facciamo in modo che sia responsive e si adatti allo schermo.

La griglia è realizzata con un elenco non ordinato di voci all’interno del quale inseriremo le immagini e il link all’immagine.

Possiamo sia decidere di nascondere l’effetto all’interno del contenitore, e in questo caso inseriremo la proprietà hoverhidden di modo che tutto quello che fuoriesce dal contenitore venga nascosto, oppure è utile anche far vedere l’effetto esterno, per esempio per mettere in primo piano un’immagine rispetto alle altre  che rimangono opache in secondo piano.

Questo effetto può essere molto utile in un sito di e-commerce in cui presentiamo i nostri prodotti e nel momento in cui facciamo il mousehover su un’immagine: in questo caso vedremo l’immagine in primo piano e le altre, opache, in secondo piano.

#A – TRASLARE L’IMMAGINE

Il primo effetto che creiamo è quello di traslare l’immagine in qualsiasi posizione X O Y con la proprietà seguente:

.thumbnail_translate li img:hover{
-webkit-transform:translate(-15px,5px);
}

Schermata 2014-04-24 alle 09.38.36

#B – RUOTARE E INGRANDIRE L’IMMAGINE

Questo effetto fa sì che l’immagine venga ruotata di poco e allo stesso tempo ingrandita in modo da visualizzare un determinato particolare dell’immagine.

.thumbnail_rotate li img:hover{
-webkit-transform:rotate(-20deg) scale(2,2);
}

Schermata 2014-04-24 alle 09.42.54

#C – DISTORCERE L’IMMAGINE

Con questo effetto distorciamo l’immagine sia in orizzontale che verticale oppure solo in verticale od orizzontale. Anche qui possiamo aggiungere altri effetti, come ruotare od ingrandire l’immagine.


.thumbnail_skew li img:hover{
-webkit-transform:skew(5deg,5deg)
}

Schermata 2014-04-24 alle 09.44.55

#D - EFFETTO PRIMO PIANO

Con questo effetto prima lavoriamo sull’immagine in primo piano ingrandendo l’immagine rispetto alle altre al passaggio del mousehover.

.thumbnail_primopiano li img:hover{
-webkit-transform:scale(1.1,1.1);
}

e tutte le altre in secondo piano le rendiamo opache con queste due piccole righe:


.thumbnail_primopiano li img:not(:hover) {
 	opacity: 0.4;
}

Schermata 2014-04-24 alle 09.47.51

#F – ROTAZIONE A 360°

Con una rotazione a 360° dell’immagine creiamo comunque un bell’effetto:

.thumbnail_rotate_completa li img:hover{
-webkit-transform:rotate(-360deg);
}

Il tutto è realizzato in maniera accattivante aggiungendo l’effetto transizione sull’immagine:

.thumbnail_rotate li img{
width:100%;	
-webkit-transition:ease-out 0.2s;

}

#2 –  EFFETTI CON TESTO

In questo caso sfruttiamo gli attributi data-title e data-description di ogni immagine e li mostriamo grazie ai pseudo elementi ::before e ::after nel momento in cui effettuiamo il passaggio del mousehover. Si tratta di un’operazione più complessa rispetto all’effetto sulle immagini poiché richiede l’utilizzo contemporaneo delle transizioni e delle trasformazioni.

Ho implementato tre casi diversi:

CASO 1: EFFETTO HOVER IMMAGINE CHE MOSTRA UN BOX CON TRANSIZIONE

In questo caso al passaggio del mouse compaiono nello stesso momento due box, il primo relativo al titolo di un colore e il secondo relativo alla descrizione con un testo descrittivo delle immagini: il tutto viene visualizzato nello stesso momento sull’immagine come sfondo al momento del passaggio del mouse (mousehover).

In questo caso giochiamo sull’opacità dei pseudo elementi ::before e ::after che avranno un’opacità pari a 0 e quindi non sarà visualizzata nel momento iniziale.

In html dobbiamo inserire gli attributi data-title e data-description:

<div class="colonna">
		<a class="caption caption1" href="http://bit.ly/MSxKx0" data-title="Foto 1" data-description="disegnata da FUNORAMA su Behance"><img src="img/1.jpg"></a>
    </div>

CSS


.caption::before,
.caption::after {
	opacity: 0;
	position: absolute;
	width: 91.5%;
	color: #333;
	padding: 20px 20px;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
	
}

Impostiamo inoltre i singoli pseudo elementi riferiti al titolo:

 

.caption::before {
	content: attr(data-title);
	top: 0;
	height: 30%;
	background: #000;
	font-size: 40px;
	font-weight: 300;
	color:#fff;
}

e poi al testo:

 

.caption::after {
	content:attr(data-description);
	top: 31%;
	height: 58.5%;
	background: #ccc;
	font-size: 16px;
	text-align: right;
}

E infine impostiamo l’opacità pari a 1 al mouse hover dei pseudo elementi:

.caption:hover::before,
.caption:hover::after {
	opacity: 1;
}

Schermata 2014-04-24 alle 09.55.15

CASO 2 - BOX A COMPARSA DALL’ALTO E DAL BASSO CON TRASLAZIONE

In questo caso non utilizziamo l’opacità ma la traslazione,

La prima cosa importante da fare è impostare tutto ciò che esce al di fuori dell’immagine in modalità nascosta con la proprietà seguente:


.caption1 {
	overflow: hidden;
	background: #000;
}

Dopodiché aggiungiamo una transizione  all’immagine per dare un effetto meno duro al passaggio dall’immagine al box descrizione:


.caption1 img {
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

Adesso dobbiamo impostare i dati per i pseudo elementi ::after e ::before ed in particolare le dimensioni del box che devono essere perfettamente uguali a quelli dell’immagine e una transizione anche qui.

.caption1::after,
.caption1::before {
	position: absolute;
	width: 100%;
	height: 50%;
	color: #000;
	z-index: 1;
	-webkit-transition: -webkit-transform 0.3s ease-in-out; 
	-moz-transition: -moz-transform 0.3s ease-in-out; 
	transition: transform 0.3s ease-in-out; 
}

Adesso impostiamo le proprietà per i box relativi al titolo e alla  descrizione e qui potete usare gli stili che preferite, come il colore del testo o dello sfondo:

.caption1::after {
	content: attr(data-title);
	top: 0;
	background: #ccc;
	font-size: 40px;
	font-weight: 300;
	padding: 10px;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
	text-align:left;
}

.caption1::before {
	width:95%;
	content: attr(data-description);
	top: 50%;
	background: #666;
	font-size: 14px;
	padding:50px 20px 0 20px;
	text-align:left;
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	transform: translateY(100%);
}

Ed infine per far si che i box titolo e descrizione compaiano a slide dal basso e dall’alto con il passaggio del mouse dobbiamo utilizzare la trasformazione “translate”:

.caption1:hover::after,
.caption1:hover::before {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

Schermata 2014-04-24 alle 09.56.23

CASO 3 – BOX A COMPARSA CON EFFETTO SLIDE DA SINISTRA VERSO DESTRA

In questo caso il procedimento è lo stesso ma facciamo si che al passaggio del mouse sull’immagine, l’immagine si sposta verso destra mentre scorre il box da sinistra

Quindi per spostare l’immagine verso destra applichiamo una trasformazione di tipo TranslateX del 100%:

.caption2:hover img {
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	transform: translateX(100%);
}

I pseudo elementi però devono trovarsi al di sotto dell’immagine e quindi vengono messi ad un livello di -1

.caption2::before,
.caption2::after {
	position: absolute;
	width: 100%;
	z-index: -1;
	background: #cecece;
	-webkit-transform: translateX(-30%);
	-moz-transform: translateX(-30%);
	transform: translateX(-30%);
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	transi

Dopodiché possiamo settare lo stile per i pseudo elementi singolarmente e cioè lo stile per il titolo e per la descrizione:


.caption2::before {
	content: attr(data-title);
	height: 30%;
	color: #05b19a;
	font-size: 40px;
	font-weight: 300;
	padding: 30px;
}

.caption2::after {
	width:90%;
	content: attr(data-description);
	top: 30%;
	height: 70%;
	color: #fff;
	font-size: 14px;
	padding: 20px 30px;
	text-align:left;

}

Infine al mousehover semplicemente trasliamo i pseudo elementi nella posizione 0 per visualizzarli:

.caption2:hover::before,
.caption2:hover::after  {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
}

Schermata 2014-04-24 alle 09.58.35

Conclusioni

Questi sono solo alcuni esempi da cui puoi partire e in base alle tue esigenze e al progetto su cui stai lavorando puoi scegliere di implementare uno di questi esempi e modificarli a tuo piacimento.
Trovate qui l’esempio completo e qui il codice completo da scaricare.
Ti piacciono? Li trovi utili? Dillo nei commenti.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
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:

9 commenti

  1. enzo
  2. Nicolò
  3. Marco
    • Marco
  4. cristiano
  5. salvo

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *