Home>Guide>Creare un effetto hover animato sulle immagini con CSS3

Creare un effetto hover animato sulle immagini con CSS3


Creare un effetto hover animato sulle immagini con CSS3


Tra gli elementi che troviamo in praticamente tutti i siti, ci sono senza dubbio le immagini, utilizzate per dare una gradevolezza alle pagine e molto spesso utilizzate come aree su cui applicare link. Ma altrettanto spesso, le immagini che presentano dei link risultano statiche al passaggio del mouse su di loro, eccezion fatta per il cursore del mouse stesso che cambia quando si trova su di un link.
Ma perché non aumentare l’impatto grafico delle nostre pagine con qualche animazione ad effetto?

  • Leggi l'articolo, ti bastano solo 2 minuti, 58 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Perché non utilizzare Javascript o jQuery?

Quanto appena descritto, potrebbe essere implementato con poche righe di codice utilizzando qualche script Javascript o qualche plugin jQuery, navigando in rete se ne trovano a centinaia. Ma questa soluzione, appesantirebbe le tue pagine non solo per quanto riguarda il peso, visto che dovrebbero includere, caricare e richiamare gli script necessari, ma anche in termini di tempi di caricamento, rallentato dall’esecuzione degli script stessi.
Senza contare che in alcuni casi, l’esecuzione di Javascript potrebbe essere disattivata o bloccata da errori, impedendo di fatto di godersi gli effetti grafici.
Dovendo sempre prestare attenzione a velocità, performance, esperienza utente, e chi più ne ha più ne metta, è necessario trovare una soluzione che ti garantisca lo stesso risultato ma eliminando quanto più possibile gli aspetti negativi.
La risposta al problema è CSS3, vediamo come implementare l’animazione.


Passo 1: HTML

La prima cosa da fare, è scrivere il markup. Niente di complicato, semplicemente inseriamo la nostra immagine, il nostro anchor text ed un elemento che li racchiuda:

<figure>
	<img src="" alt="" title="" />
	<a href="#"></a>
</figure>

Passo 2: Lo stile

Nel caso in esempio, abbiamo scelto come contenitore l’elemento <figure>, a cui andiamo ad applicare poche e semplici regole di CSS, di cui analizziamo nel dettaglio le parti più importanti:

figure {
	background: #700877;
	display: inline-block;
	overflow: hidden; 
	position: relative;
}

Applichiamo una transizione agli pseudo elementi collegati al contenitore (::before e ::after) e all’immagine:

figure img,
figure:before,
figure:after {
	transition: all 0.4s ease;
 	-webkit-transition: all 0.4s ease;
}

Applichiamo due pseudo elementi al contenitore <figure>, i quali avranno opacità nulla (le rendiamo così inizialmente invisibili) e posizionamento assoluto:

figure:before,
figure:after {
	background-color: #fff;
	content: '';
	opacity: 0;
	position: absolute;
	z-index: 1;
	transform: translate( -50%, -50% );
	-webkit-transform: translate( -50%, -50% );
}

Diamo una forma al primo pseudo elemento, che prenderà le sembianza di un piccolo tratto orizzontale:

figure:before {
	left: 0;
	height: 1px;
	width: 60px;
}

Mentre il secondo pseudo elemento, diventerà un piccolo tratto verticale di uguali dimensioni rispetto al precedente:

figure:after {
	height: 60px;
	top: 100%;
	width: 1px;
}

Facciamo in modo che l’anchor text si espanda e occupi tutto lo spazio a disposizione fino a coprire il contenitore <figure>:

figure a {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

All’evento :hover sull’elemento immagine (quando il mouse transita sull’immagine), applichiamo una trasformazione che aumenta le dimensioni dell’elemento del 20% e la renda trasparente al 50% (per lasciar intravedere il background precedentemente applicato al contenitore):

figure:hover img {
	opacity: 0.5;
	transform: scale( 1.2 );
}

Muoviamo gli pseudo elementi, così che si posizionino esattamente al centro dell’immagine, creando una croce:

figure:hover:before,
figure:hover:after {
	left: 50%;
	opacity: 1;
	top: 50%;
}

Ed ecco l’effetto finale, davvero molto molto bello ed elegante, guardalo su JSFiddle.




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Aggiungere una colonna personalizzata in WordPress

Aggiungere una colonna personalizzata in WordPress


Ecco una guida utile per imparare ad aggiungere una colonna personalizzata alla lista degli articoli nel backend di WordPress, così da avere sempre a portata di mano le informazioni che ci occorrono.

Creare un menu off-canvas con CSS3

Creare un menu off-canvas con CSS3


Impariamo a creare un menu off-canvas utilizzando esclusivamente HTML e CSS3, con gradevoli animazioni proposte senza l’utilizzo di jQuery o Javascript, così da non appesantire le pagine.

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Privacy Policy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Privacy Policy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Privacy Policy)