effettoingrandimentocss3

Come creare un effetto ingrandimento con CSS3

19 Giugno 2017 0 Commenti

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. 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>

Tags: