Effetto hover sulle immagini in jQuery

Creato il 26 maggio 2012 da Ketek @CarloVentrella

Continua la raccolta di effetti in jQuery con un nuovo script che "colora" zone dell´immagine al passaggio del mouse.

RISULTATO FINALE

Ketek - Effetto hover sulle immagini

HTML

 
<body>
                <div id="immagine_black"></div>
                <div id="immagine_colored"></div>
</body>
 

CSS

 
#immagine_black,#immagine_colored
{
                position:absolute;
                width:800px;
                height:640px;
                top:50%;
                left:50%;
                margin-left:-400px;
                margin-top:-320px;
                -moz-box-shadow: 0 0 20px black;
              -moz-border-radius: 20px;
              -webkit-box-shadow:0 0 20px black;
              -webkit-border-radius: 2px;
              box-shadow: 0 0 20px black;
}
.thumb_black
{
                display:inline-block;
                background-image:url(ad3a6ad013f422c2241fd27800364ead_black.jpg);
}
.thumb_colored
{
                display:inline-block;
               background-image:url(ad3a6ad013f422c2241fd27800364ead.jpg);
                opacity:0;
}
 

JQUERY

La logica del codice è la seguente: divido le due immagini, una in bianco e nero e l´altra colorata,  in due griglie 4x5 impostando i giusti parametri di altezza,larghezza e posizione del background in modo da far apparire l´immagine intere. Le due immagini sono posizionate l´una sopra l´altra e quella colorata è trasparente di default: al passaggio del mouse la singola sezione della griglia sarà animata con un´ effetto di 0.2 secondi  che rende opaca l´immagine. L´operazione inversa avviene all´uscita del mouse dalla sezione.

 
window.onload = function()
                {
                      // divido l´immagine in una griglia 4x5
                      row = 3; // non 4 perch&egrave; parto da 0
                      cols = 4; // non 5 perch&egrave; parto da 0
                      height_imm = 640;
                      width_imm = 800;
                      height = 640/4; // altezza delle sezioni
                      width = 800/5; // larghezza delle sezioni
                      back_pos_top = 0; // background position - top
                      back_pos_left = 0; // background position - left
                      cols_attuale = 0; // colonna attuale
                      row_attuale = 0; // riga attuale
                      for (x=0;x<20;x++)  // creo la griglia
                      {
                         $(´#immagine_black´).append(´+width+´px;
                            height:´+height+´px;background-position:´+back_pos_top+´px ´+back_pos_left+´px;"   
                            >

Potrebbero interessarti anche :

Possono interessarti anche questi articoli :