Añade un efecto hover animado con jQuery

Uno de los principales motivos por los que me gusta Mootools es la cantidad de efectos que podemos lograr con él.

Sin embargo hoy os traigos un efecto logrado con jQuery y creado por Timothy van Sas.

El código

Javascript

$(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});
});
});

CSS

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;
}

HTML

<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>

Podemos ver el ejemplo que ha creado Timothy para hacernos una idea de cómo queda.

Vía Anieto2k.

3 thoughts on “Añade un efecto hover animado con jQuery

Leave a Reply

Your email address will not be published.

Required fields are marked *

Your avatar