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
