Simulare effetto Hover con Css e jQuery

Oggi volevo proporvi questo metodo di simulazione di un effetto hover, trovato su tympanus qualche tempo fa.

Trovo questo effetto molto gradevole e sicuramente tornerà utile a chi vorrà utilizzarlo per il proprio portfolio.

Analizziamolo meglio:

Fondamentalmente abbiamo un immagine divisa in due parti.
Dove la parte di sinistra è l’originale, mentre la parte di destra è quella che simulerà l’effetto hover.

Grazie a jQuery e al Css con la proprietà background-position, possiamo ricreare questo piacevole effetto.

Vediamo come:

Codice Html:

Quello che dobbiamo fare è semplicemente assegnare la classe “pht” al div che conterrà la nostra immagine.

1
2
3
4
5

         <div class="content"> 
            <div class="photo1 pht"><p style="display:none;"></p></div> 
            <div class="photo2 pht"><p style="display:none;"></p></div> 
            <div class="photo3 pht"><p style="display:none;"></p></div> 
        </div>

Codice jQuery:

JQuery ci serve per “animare” la transizione, in questo caso con il parametro “fast“.

Molto bello a mio parere anche l’effetto che si ottiene con “slow“, a voi la libertà di sperimentare!

1
2
3
4
5
6
7
8
9
10
11
12

$(function() { 
	$('.pht').hover(
		function() {
			var $this = $(this);
		         	$this.find('p').stop(true,true).fadeIn('fast');
				}, 
		function() {
			var $this = $(this);
				$this.find('p').stop(true,true).fadeOut('fast');
				}
			);
		});

Codice Css:

Molto semplicemente noi abbiamo delle immagini 600×452, e semplicemente all’inizio mostriamo i primi 300px, quando ci spostiamo sull’immagine con il puntatore, attraverso il css andiamo a mostrare i successivi 300px.

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
28
29
30
31
32
33
34

.photo1, .photo2, .photo3{
    width:300px;
    height:452px;
    background-repeat:no-repeat;
    background-position:0px 0px;
    float:left;
    margin:5px;
    border:1px solid #333;
}
.photo1{
    background-image:url(../images/1.png);
}
.photo2{
    background-image:url(../images/2.png);
}
.photo3{
    background-image:url(../images/3.png);   
}
.photo1 p, .photo2 p, .photo3 p{
    background-position:-300px 0px;    /*IL TRUCCO E' QUI !*/
    display:block;
    width:100%;
    height:452px;
    background-repeat:no-repeat;
}
.photo1 p{
    background-image:url(../images/1.png);
}
.photo2 p{
    background-image:url(../images/2.png);
}
.photo3 p{
    background-image:url(../images/3.png);
}

Scarica un esempio da qui.

Semplice no?
Unica pecca è che dovremo lavorare a priori con Photoshop per prepararci tutte le immagini, ma sicuramente la pazienza verrà ripagata! Non credi?

Non dimenticare di condividere l’articolo con i tuoi amici!

[adsense]