Timothy van Sas nos muestra una interesante y vistosa forma de animar los eventos hover en imagenes. Para ello hace uso de jQuery y el método hover().
jQuery
$(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});
});
});En este código vemos que estamos cogiendo los elementos del listado <ul /> con class hover_block y les añadimos una funcionalidad al evento hover() que se activará al pasar por encima con el puntero.
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>Si vemos el ejemplo que Timothy ha creado, seguro que lo tendrás en cuenta para futuros desarrollos.
Wow! Esta bárbaro! lo que se puede hacer con jQuery! Increible.
11 comentarios, 1 referencias
+
#