Miniature in stile mosaico - jQuery

Nell’articolo di oggi vi mostro uno script realizzato in jQuery in cui delle miniature sono disposte all’interno di una griglia in stile mosaico per poi ingrandirsi al passaggio del mouse.

E’ un’animazione simpatica e molto semplice da realizzare, per un’ anteprima del risultato vi rimando alla demo:

DEMO – Miniature in stile mosaico

La struttura di base è costituita da una griglia e all’interno di ogni cella è sistemata la miniatura.

Il compito di jQuery è solo quello di gestire l’animazione al passaggio del mouse: quando questo sarà sopra la miniatura assumerà un valore più alto di z-index per portarla in primo piano rispetto alle altre e gestirà l’ingrandimento: le dimensioni aumenteranno di 50px (sia in lunghezza che in larghezza) e, contemporaneamente, la miniatura si sposterà di 25px verso l’alto e verso sinistra in modo tale da fare sembrare che l’ingrandimento abbia origine dal centro della miniatura.

HTML

 
<div id="script_box">
<ul>
   <li><a href="#"><div class="thumb" style="background-color:#59b6d0;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#d96c4a;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#d5d284;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#3b9e5e;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#146f99;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#e9ae50;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#4d6f33;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#4c5420;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#1f4f5d;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#d9e950;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#334922;"></div></a></li>
   <li><a href="#"><div class="thumb" style="background-color:#2d3309;"></div></a></li>
</ul>
</div>
 

CSS

 
#script_box
{
            position: relative;
            width:800px;
            height:600px;
            background:grey;
            margin-top:60px;
            margin-left: auto;
            margin-right: auto;
            -moz-box-shadow:0 0 7px #333;
            -webkit-box-shadow:0 0 7px #333;
}
#script_box ul
{
            position: relative;
            width:100%;
            height:100%;
            margin:0;
            padding: 0;
}
#script_box ul li
{
            position: relative;
            width:200px;
            height:200px;
            list-style: none;
            float:left;
}
.thumb
{
            position: absolute;
            width:100%;
            height:100%;
            z-index: 1;
}
 

jQUERY

 
$(document).ready(function()
{
    $('#script_box ul li a').mouseenter(function()
    {
         $(this).children('.thumb').css('zIndex',999);
         $(this).children('.thumb').animate({'width':'250px','height':'250px','left':'-25px','top':'-25px'},100);
         $(this).children('.thumb').css('-moz-box-shadow','0 0 7px #333');
         $(this).children('.thumb').css('-webkit-box-shadow','0 0 7px #333');
     });
     $('#script_box ul li a').mouseleave(function()
     {
          $(this).children('.thumb').animate({'width':'200px','height':'200px','left':'0px','top':'0px'},100,function()
          {
                $(this).css('zIndex',1);
          });
          $(this).children('.thumb').css('-moz-box-shadow','none');
          $(this).children('.thumb').css('-webkit-box-shadow','none');
      });
});