Leggerai questo articolo in: 2 minuti

Oggi ti mostro come creare una animazione su delle immagini realizzata con jQuery. Ammettilo, anche tu resti a giochicchiarci un pò quando ne vedi una!

Effetto hover animato con jquery

L’idea di avere un effetto hover sugli elementi di un sito affascina un pò tutti, sicuramente attraverso questa tecnica applicata ad un immagine, possiamo fornire maggiori dettagli al nostro utente se interessato, senza bombardarlo di informazioni che magari non interessano.

Vediamo come realizzare questa animazione:

La realizzazione è abbastanza facile, abbiamo una lista con posizione relativa, alle nostre immagini viene assegnata una posizione assoluta. Grazie a Jquery possiamo rendere fluida e piacevole la transizione.

Codice Html:

1
2
3
4
<ul class="hover_block">
			<li><a href="/"><img src="tuaImmagine.png" alt="alt" /> Quello che vuoi tu!</a></li>
			<li><a href="/"><img src="tuaImmagine.png" alt="alt" /> Quello che vuoi tu!</a></li>
		</ul>

Codice Css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
	ul.hover_block li{
			list-style:none;
			float:left;
			background: #fff;
			padding: 10px;
			width:300px; position: relative;
			margin-right: 20px; }
 
		ul.hover_block li a {
			display: block;
			position: relative;
			overflow: hidden;
			height: 150px;
			width: 268px;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
		}
 
		ul.hover_block li a { text-decoration: none; }
 
		ul.hover_block li img {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}

Codice jQuery animazione verticale:

1
2
3
4
5
6
7
$(function() {
	$('ul.hover_block li').hover(function(){
	$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
         	}, function(){
	$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
	});
	});

Codice jQuery animazione orizzontale:

1
2
3
4
5
6
7
$(function() {
	$('ul.hover_block2 li').hover(function(){
	$(this).find('img').animate({left:'300px'},{queue:false,duration:500});
	}, function(){
	$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
	});
	});

Visualizza una demo da qui.
Scarica un esempio da qui.

Ti piace questa animazione? Non dimenticare di condividere l’articolo con i tuoi amici!

[adsense]