Crea efectos animados hover atractivos facilmente con CSS3

¡Hacer efectos animados hover en CSS3 puede ser muy sencillo! En un artículo anterior, hablé de la librería para animaciones de CSS3 llamada Magic Animations de MiniMAC. Hoy, vamos a utilizarla como motor de animación para aplicar una serie de efectos en el hover de distintas miniaturas.

Con la disponibilidad de los proyectos de código abierto, la creación de animaciones frescas y sutiles puede ser muy rápida y sencilla. Al hacer uso de la librería off-the-selves lo que tenemos que hacer es crear una estructura y aplicarle las clases para animar los distintos elementos.

HTML

Vamos a crear 3 capas dentro de un contenedor llamado .box.

• Capa 1: .link Capa superior que contendrá un enlace a una nueva ventana
• Capa 2: .box-overlay Capa del medio que contendrá una imagen. Una vez que el ratón se pose, la imagen se apartará para revelar el contenido debajo de ella.
• Capa 3: .box-content Capa inferior en la que insertaremos el contenido. Una vez que el ratón se pose, el contenido será revelado.

Más abajo verás la estructura HTML. Hemos añadido .magictime, data-hover y data-return en la clase .box-overlay. Lo necesitamos para animarlo. Puedes cambiar el tipo de animación que quieras, cambiando su hover y devolviendo el valor. Para ver la lista de animaciones, puedes visitar la demo de Magic Animation.

<div class="box">
	<div class="box-content">
		<div class="box-wrapper">
			<!-- content put here -->		
		</div>
	</div>
	<div class="box-overlay magictime" data-hover="puffOut" data-return="puffIn">
		<!-- image put here -->
	</div>
	<a class="link" href="#" target="_blank"></a>						
</div>

CSS

El CSS es bastante simple también. Hemos añadido z-index en .box-overlay, .link y .box-content para estar seguros de que se sitúa correctamente el elemento.

.box {
	width:260px;
	height:195px;
	margin:20px;
	float:left;
	position: relative;
}

.box-content {
	display:block;
	padding:20px;
	width: 100%;
	height: 100%;
	background: #333;
	color:#ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.box-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index:10;
}

a.link {
	display:block;
	width: 100%;
	height: 100%;		
	position: absolute;
	top:0;
	left:0;
	z-index:15;		
}

jQuery / Javascript

Por último, pero no menos importante, utilizamos jQuery para añadir y eliminar clases. ¿Recuerdas que teníamos que especificar el tipo de animación que queramos en el data-hover y el data-return de -box-overlay? Este script obtendrá el valor de dichas propiedades y las añadirá a las clases correspondientes para completar el efecto hover con la animación CSS3 correcta definida en la librería Magic Animation.

$(function () {
	$('.box').hover(
		function () {
			var overlay = $(this).find('.box-overlay');
			overlay.removeClass(overlay.data('return')).addClass(overlay.data('hover'));
		},
		function () {
			var overlay = $(this).find('.box-overlay');		
			overlay.removeClass(overlay.data('hover')).addClass(overlay.data('return'));

		}
	);
});	

¡Y ya está! Así de simple. Con la librería para animaciones, podemos crear buenos efectos hover realmente rápido y de manera fácil. Hay mucho margen de mejora en este tutorial, por ejemplo, podemos hacer que se vea mucho mejor en navegadores antiguos. Pero no vamos a entrar esas en esta ocasión. Espero que te haya gustado, y si tienes alguna duda, déjanosla en los comentarios.

Fuente: queness.com