Cómo animar un efecto hover con jQuery

Este tutorial te enseñará cómo crear un script en jQuery para mostrar información a los visitantes cada vez que hagan hover con el ratón sobre una imagen.

Es un efecto muy sencillo de implementar que tiene un aspecto muy atractivo, y resulta una excelente opción para un portafolio, por ejemplo.

La mecánica es muy simple: hacemos una lista con posición relativa, colocamos imágenes con posición absoluta, y cuando pasemos el ratón sobre ella le daremos a jQuery la orden de aplicarle un bonito efecto de animación.

Aquí tenéis el código:

HTML

<ul class="bloque_hover">
	<li>
		<a href="/"><img src="your_image.gif" alt="alt" /> Texto</a>
	</li>
	<li>
		<a href="/"><img src="your_image.gif" alt="alt" /> Texto</a>
	</li>
</ul>

CSS

		ul.bloque_hover li
		{
			list-style: none;
			float: left;
			background: #fff;
			padding: 10px;
			width: 300px;
			position: relative;
			margin-right: 20px;
		}
		ul.bloque_hover 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.bloque_hover li a { text-decoration: none; }
		ul.bloque_hover li img
		{
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}

jQuery

$(function()
{
	$('ul.bloque_hover li').hover(function()
	{
		$(this).find('img').animate({top:'182px'},{queue:false, duration:500});
	}, function()
	{
		$(this).find('img').animate({top:'0px'},{queue:false, duration:500});
	});
});

Podéis ver en acción este efecto de jQuery pinchando en este enlace: demo

Fuente: Animate a Hover with jQuery [icng]