[ sajtfokus @ 09.10.2011. 22:12 ] @
Kako se postiže ovaj efekat na http://www.linkeri.com?

Sa desne strane na ovom sajtu (sekcija: Razno - Najbolje), kad se postavi miš na thumbnail, on se uveća uz neki efekat.

Zna neko?
[ Aleksandar Ružičić @ 10.10.2011. 18:13 ] @
ako pogledas DOM stablo te strane mozes da vidis da taj efekat funkcionise tako sto element koji sluzi kao kontejner oko link sa manjom slikom sadzi jos jedan element koji u sebi sadrzi vecu sliku i taj element je inicijalno sakriven. kada se kontejen hoveruje element koji u sebi sadrzi vecu sliku se prikaze pomocu .animate() metode.

dakle, struktura bi u osnovi bila ovakva:

Code (html):

<div class="container">
   <a href=".."><img src="small.png" /></a>
   <div class="large">
      <a href=".."><img src="large.png" /></a>
   </div>
</div>
 


sto se potrebnog css-a tice, .container mora da ima position: relative dok .large mora da ima position: absolute; display: none;, ukoliko su ti .container i .large fiksne velicine onda mozes u css-u definisati left i top za .large, u suprotnom moraces da izracunas te vrednosti pomocu javascripta.

sam javascript je veoma prost, ako uzmemo jquery:
Code (javascript):

jQuery(function($) {
   $('.container').hover(
      function() { $(this).find('>.large').stop().animate({opacity: 1}); },
      function() { $(this).find('>.large').stop().animate({opacity: 0}); }
   );
});
 


ovo je samo jedan od nacina kako da se postigne taj efekat, mislim da je dovoljno jednostavan za pocetnike.