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.
15 comentarios, 1 referencias
+
#