Crear efectos hover llamativos con CSS3 (Parte II)

Crear efectos hover llamativos con CSS3 (Parte II)

En el tutorial anterior les mostré como crear 5 efectos hover muy llamativos sobre nuestras imágenes. En este tutorial estaremos trabajando con los 5 ejemplos restantes.

Como mencioné en el artículo anterior me estoy basando en el ejemplo creado por Alessio Atzeni en el sitio web tympanus.net, al cual puedes acceder mediante este link.

De la misma manera que en el artículo anterior, deben tener en cuenta que CSS3 al ser experimental no funcionará en ciertos navegadores y deben agregarse prefijos diferentes para cada uno de los navegadores. En el código expuesto en este artículo se omitirán tales prefijos pero se incluirán en el código fuente que coloco a disposición para su descarga.

El HTML

Estaremos utilizando el mismo código HTML inicial del artículo anterior.

<div class="view">  
    <img src="img/koenigsegg-agera-r.jpg">  
    <div class="mask">  
        <h2>Título</h2>  
        <p>Texto</p>  
        <a href="#" class="info">Leer Más</a>  
    </div>  
</div>

El CSS

Las reglas CSS básicas serán las mismas creadas en el artículo anterior.

EJEMPLO 6

Crear efectos hover llamativos con CSS3 Parte II - Ejemplo 6

En este ejemplo haremos que la descripción de la imagen aparezca desde el frente mediante la propiedad scale, la cual estará en un principio con un valor de 10 y pasará a 1 al momento de hacer el hover sobre la imagen. El botón "Leer Más” se deslizará desde abajo mediante la propiedad translate.

.view img { 
    transition: all 0.4s ease-in-out 0.5s; 
}
.view .mask { 
    background-color: rgba(146,96,91,0.5);
    opacity:0;
    transition: all 0.3s ease-in 0.4s;
}
.view h2 {
    opacity:0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 10px 20px 0px 20px;
    transform: scale(10);
    transition: all 0.3s ease-in 0.1s;
}
.view p { 
    opacity:0;
    transform: scale(10);
    transition: all 0.3s ease-in 0.2s;
}
.view a.info { 
    opacity:0;
    transform: translateY(100px);
    transition: all 0.3s ease-in 0.1s;
}

Y estos serán los estilos que crearan nuestro efecto hover.

.view:hover .mask {  
    opacity:1; 
    transition-delay: 0s;    
}                                                                            
.view:hover img { 
    transition-delay: 0s;
}
.view:hover h2 { 
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}
.view:hover p { 
    opacity:1; 
    transform: scale(1);
    transition-delay: 0.2s;
}
.view:hover a.info { 
    opacity:1;
    transform: translateY(0px);
    transition-delay: 0.3s;
}

EJEMPLO 7

Crear efectos hover llamativos con CSS3 Parte II - Ejemplo 7

En este séptimo ejemplo haremos girar la imagen en el centro del contenedor al mismo tiempo que vamos reduciendo su tamaño hasta que desaparezca, en ese momento aparecerán desde arriba los demás elementos.

.view img {
    transition: all 0.5s ease-out;
    opacity: 1;
}
.view .mask { 
    background-color: rgba(77,44,35,0.5);
    opacity: 0;
    transition: all 0.3s ease-out;
    transform: rotate(0deg) scale(1);
}
.view h2, .view p, .view a.info {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}

En el evento hover vamos a añadir un retardo a la aparición de los elementos de descripción, esto mostrará la imagen girando primero y al terminar de girar aparecerá la descripción. Al quitar el puntero, los elementos de descripción desaparecerán inmediatamente y la imagen aparecerá girando en sentido inverso al cual desapareció.

.view:hover img {
    transform: rotate(720deg) scale(0);
    opacity: 0;
}
.view:hover .mask { 
    opacity: 1;  
    transform: translateY(0px) rotate(0deg);
    transition-delay: 0.4s;
}                                  
.view:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.7s;
}
.view:hover p { 
    transform: translateY(0px);
    transition-delay: 0.6s;
}
.view:hover a.info { 
    transform: translateY(0px);
    transition-delay: 0.5s;
}

EJEMPLO 8

Crear efectos hover llamativos con CSS3 Parte II - Ejemplo 8

En este ejemplo conseguiremos que la descripción aparezca desde la parte superior y que al caer tenga un efecto de rebote.

.view .mask { 
    background-color: rgba(255, 255, 255, 0.7);
    top: -200px;
    opacity: 0;
    transition: all 0.3s ease-out 0.5s;
}
.view h2 {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.1s;
}
.view p { 
    color: #333;
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out 0.2s;
}
.view a.info { 
    transform: translateY(-200px);
    transition:  all 0.2s ease-in-out 0.3s;
}

Vamos a agregarle los efectos a la máscara para que genere el efecto de rebote al hacer hover con el ratón.

.view:hover .mask { 
    opacity: 1; 
    top: 0px; 
    transition-delay: 0s;
    animation: bounceY 0.9s linear;
}                                                                                       
.view:hover h2 { 
    transform: translateY(0px);
    transition-delay: 0.4s;
}
.view:hover p {
    transform: translateY(0px);
    transition-delay: 0.2s;
}
.view:hover a.info {
    transform: translateY(0px);
    transition-delay: 0s;
}

Ahora creamos los keyframes que se encargarán de dar la animación al efecto de rebote. Solo es soportado por los últimos navegadores.

@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}

EJEMPLO 9

Crear efectos hover llamativos con CSS3 Parte II - Ejemplo 9

En este ejemplo utilizaremos dos máscaras para poder conseguir el efecto deseado. Una de ellas se deslizará desde la parte superior izquierda y la otra desde la parte inferior derecha. El HTML tendrá que ser modificado de la siguiente manera.

<div class="view">  
    <img src="img/tesla-roadster.jpg">  
    <div class="mask mask-1"></div>
    <div class="mask mask-2"></div>
    <div class="content"> 
        <h2>Título</h2>  
        <p>Texto</p>  
        <a href="#" class="info">Leer Más</a>  
    </div>  
</div>

Cada máscara tendrá un efecto diferente además de estar una alineada en la parte superior izquierda y otra en la parte inferior derecha.

.view .mask-1,
.view .mask-2 {
    height: 361px;
    width: 361px;
    background: rgba(119,0,36,0.5);
    opacity: 1;
    transition: all 0.3s ease-in-out 0.6s;
}
.view .mask-1 { 
    left: auto;
    right: 0px;
    transform: rotate(56.5deg) translateX(-180px);
    transform-origin: 100% 0%;
}
.view .mask-2 { 
    top: auto;
    bottom: 0px;
    transform: rotate(56.5deg) translateX(180px);
    transform-origin: 0% 100%;
}

Al contenido se le dará un efecto que generar谩 la ilusión salir de la pequeña separación resultante al unirse las dos máscaras.

.view .content {
    background: rgba(0,0,0,0.9);
    height: 0px;
    opacity: 0.5;
    width: 361px;
    overflow: hidden;
    transform: rotate(-33.5deg) translate(-112px,166px);
    transform-origin: 0% 100%;
    transition: all 0.4s ease-in-out 0.3s;
}
.view h2 {
    background: transparent;
    margin-top: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.view a.info {
    display: none;
}

Al finalizar la ejecución del efecto de las máscaras, vamos a hacer que el contenido salga de la ranura resultante de la unión de las máscaras.

.view:hover .content {
    height: 120px;
    width: 300px;
    opacity: 0.9;
    top: 40px;
    transform: rotate(0deg) translate(0px,0px);
}
.view:hover .mask-1,
.view:hover .mask-2{
    transition-delay: 0s;
}
.view:hover .mask-1 {
    transform: rotate(56.5deg) translateX(1px);
}
.view:hover .mask-2 {  
    transform: rotate(56.5deg) translateX(-1px);
}

EJEMPLO 10

Crear efectos hover llamativos con CSS3 Parte II - Ejemplo 10

En este último ejemplo realizaremos un sencillo efecto en el evento hover del ratón. Vamos a acercar la imagen hasta que desaparezca y traeremos la descripción desde el fondo.

.view img { 
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}
.view .mask { 
    background-color: rgba(255, 231, 179, 0.3); 
    transition: all 0.5s linear;
    opacity: 0;
}   
.view h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

En el hover escalaremos la imagen y colocaremos su opacidad en 0 para dar la impresión que la imagen ha desaparecido.

.view:hover img { 
    transform: scale(10);
    opacity: 0;
}
.view:hover .mask { 
    opacity: 1;
}                                                                            
.view:hover h2,
.view:hover p,
.view:hover a.info {
    transform: scale(1);
    opacity: 1;
}

CONCLUSIÓN

Hemos llegado al final de este tutorial compuesto por dos artículos. Te invito a leer también el artículo anterior donde creamos otros 5 efectos hover muy llamativos y de manera muy sencilla para que los utilices en tus desarrollos.

Espero te hayan gustado y los compartas mediante las diversas redes sociales, también te invito a que dejes tus comentarios sobre mis artículos y si necesitas ayuda no dudes en usar el formulario de contacto para comunicarte conmigo.

Comentarios

Deja tu comentario

http://