Come creare un effetto ingrandimento con CSS3

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

 Grazie alla sua rapida ascesa e continua evoluzione, il CSS3 ci permette ormai di ottenere delle soluzioni animate senza ricorrere all’utilizzo di Javascript e con pochissime righe di codice. Vediamo come.

In questa breve guida, infatti, voglio mostrarvi un semplice modo in cui poter ottenere un effetto ingrandimento all’hover di un’immagine. Bisogna precisare, che mostreremo una tecnica valida solo con i browser webkit (Safari, Chrome). Clicca QUI per vedere la demo, mentre QUI per scaricare il tutorial.

Per prima cosa, inseriamo all’interno del file html la nostra immagine attribuendole la classe “img” ed un collegamento (comunque non indispensabile):

<a href="#"><img src="/1.jpg" class="img" alt="" /></a>

 Nel css del nostro documento, invece, attribuiamo uno stile alla classe img:

.img{
//impostiamo un arrotondamento ed una ombra alla nostra immagine per renderla più accattivante
	border-radius: 5px;
	box-shadow: 0 4px 3px rgba(0,0,0,0.4);
//posizioniamola al centro
	display: block;
	margin: 20px auto;
}

Ed infine scriviamo le poche righe di codice CSS3 che ci servono per animare l’immagine al suo passaggio con il mouse:

.img:hover{
//con transform modifichiamo la grandezza della nostra immagine rendendola piu grande
	transform: scale(1.2);
//infine con transition dichiariamo quale valore va animato (quindi transform), quanto tempo debba durare la nostra animazione (0.2s) e di che tipo debba essere (linear).
	transition: transform 0.2s linear;
}

Codice Completo:

<html>
	<head>
		<title>Effetto ingrandimento con CSS3 - Visual-Art.it</title>
		<style>
		.img{
			border-radius: 5px;
			box-shadow: 0 4px 3px rgba(0,0,0,0.4);
			display: block;
			margin: 20px auto;
		}
		.img:hover{
			transform: scale(1.2);
			transition: transform 0.2s linear;
		}
 
		</style>
	</head>
 
	<body>
		<a href="#"><img src="/1.jpg" class="img" alt="" /> </a>	 		
	</body>
</html>

 Spero che questo tutorial semplicissimo vi sia piaciuto, restate sintonizzati su Visual-Art.it per non perdervi nessun articolo.

 

Accedi o Registrati mediante il modulo di login per commentare.