1. Objetivo
Vamos a crear un menú simple compuesto de iconos. Al pasar el ratón por encima de esos vínculos, las imágenes se ampliarán, al mismo tiempo que girarán ligeramente y que mostrarán una deformación horizontal.
2. La estructura del menú
El menú utilizará la clásica lista ul:
<ul id="menu">
<li><a href="#"><img src="twitter.png" alt="twitter" />
</a></li>
<li><a href="#"><img src="facebook.jpg" alt="facebook" />
</a></li>
<li><a href="#"><img src="flickr.png" alt="flickr" />
</a></li>
</ul>
3. El diseño
Los elementos li presentarán los estilos de diseño "habituales":
#menu li {
list-style: none;
display: inline-block;
margin-right: 20px;
}
Cada imagen (img) se transformará cuando se pase el cursor por encima del vínculo (a:hover). Se le aplicará un cambio de escala (scale), una rotación (rotation) y un desplazamiento (translate).
#menu li a:hover img {
-moz-transform: scale(1.1) rotate(3deg) translateX(2px);
-webkit-transform: scale(1.1) rotate(3deg) translateX(2px);
-o-transform: scale(1.1) rotate(3deg) translateX(2px);
transform: scale(1.1) rotate(3deg) translateX(2px);
}
4. El resultado visual:
Esta sería la visualización inicialmente:
Esta sería la visualización cuando se pase el cursor por encima de la imagen:
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario