Efecto hover transition y transform con CSS3-HTML5

A veces hacer un efecto hover, pasar el mouse sobre un elemento ya sea una imagen o alguna section o div, se nos vuelve un poco complicado, pero dejame decirte que no es nada complicado es básicamente manejar posiciones de los elemento como por ejemplo las absoluta, relativas…etc.

Hoy vamos a aprender a realidad 2 tipos de hover de una manera sencilla utilizando las transiciones de CSS3.

Antes que nada tienes que crear una envoltura o contenedor para nuestro elemento al cual vamos a pasar el mouse, en este caso sería agregaríamos una secction con la clase «wrapper». luego agregar la caja contenedora de la imagen o elemento, y para terminar agregamos otro para nuestro elemento :hover


<body>
	<section class="wrapper">
		<div class="forma">
			<div class="detalles">
				<h3>Detalles</h3>
			</div>
		</div>
	</section>

	<section class="wrapper">
		<div class="forma2">
			<div class="detalles2">
				<h3>Detalles</h3>
			</div>
		</div>
	</section>
</body>

Para terminar la parte del html solo agregare un h3 como contenido a nuestro hover.

Para que todo esto funciones necesitamos css3, para agregar las transition a nuestra animación, agregamos a las Forma y Forma 2, recuerden agregar los prefijos, en el caso tambien desees que se vea en otros navegadores como internet explorem que es «-ms-«, esta animación es muy buena, espero lo use en sus proximos proyectos.


.wrapper{
		width: 500px;
		margin: 0 auto;
	}
	.forma{
		width: 250px;
		height: 350px;
		background: #CCC;
		position: relative;
	}
	.detalles{
		position: absolute;
		background: orange;
		width: 250px;
		height: 350px;
		color: #fff;
		text-align: center;
		z-index:999;
		-webkit-transform: scale(0);
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 250ms;

		-moz-transform: scale(0);
		-moz-transition-timing-function: ease-out;
		-moz-transition-duration: 250ms;
	}
	.forma:hover .detalles{
		cursor: pointer;
		-webkit-transform: scale(1);
		-webkit-transition-timing-function: ease-out;
		-webkit-transition-duration: 250ms;

		-moz-transform: scale(1);
		-moz-transition-timing-function: ease-out;
		-moz-transition-duration: 250ms;
	}

En la demo pueden ver el codigo en marcha, tambien dejo la descarga de los archivos originales. la contraseña del zip es: antocas.com

Twittear

Efecto hover transition y transform con CSS3-HTML5

Relacionados