Szimpla hover effekt, némi animációval... egyszerűnek tűnik, nem? Valóban egyszerű, de nagyszerű - portfóliókban pl. kifejezetten jól mutathat.
Használata nagyon egyszerű, készítesz egy listát relatív pozícióval, a beillesztett képek abszolút pozíciót kapnak, a hover animációját pedig a jQuery plugin biztosítja.
A HTML
Tehát egyszerű listába ágyazzuk a képeket:
1 2 3 4 | <ul class="hover_block"> <li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li> <li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li> </ul> |
A CSS formázás
A lista elemek pozicionálása relatív, míg a képeké abszolút.
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; } |
A jQuery kód
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}); }); }); |
Az effekt időtartamát lecsökkentheted vagy növelheted a 'duration' opcióval - értelemszerűen nagyobb duration lassabb effektet eredményez.
Mire vársz? Töltsd le vagy nézd meg a demót !
A plugin szerzője Timothy van Sas.