Desvanecimiento de imagen y aparición de textos

Desvanecimiento de imagen y aparición de textos
  • Eborio Linárez
  • November 19, 2012
  • 0

Seguimos trabajando con el HTML básico publicado en el post HTML y CSS básicos para las transiciones para conseguir el efecto deseado que en este caso es hacer que la imagen se desvanezca hacia el fondo y luego desde el mismo sitio donde ésta se desvaneció aparezcan la máscara junto a los textos.

Veamos el ejemplo en vivo ya finalizado.

See the Pen Desvanecimiento de imagen y aparición de textos by Eborio Linárez (@eborio) on CodePen.

Ahora comencemos definiendo algunas reglas CSS.

.view img {
    transition: all 0.4s ease-in-out 0.2s;
}
.view .mask {
    background-color: hsla(0, 0%, 0%, 0.8);
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s ease-in;
}
.view h2 {
    opacity: 0;
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.3);
    background: transparent;
    transition: all 0.5s ease-in-out;
}
.view p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view a.info {
    opacity: 0;
    transition:all 0.5s ease-in-out;
}

Como ya hemos hecho en todos los ejemplos, se le agregan transiciones a cada uno de los elementos.

A la máscara .mask se le aplica scale(0) lo cual disminuye su tamaño hasta hacerlo invisible. Además se rota 180 grados a la izquierda.

Al título se le agregar un borde inferior, opacidad en 0 y un fondo transparente.

El párrafo y el enlace simplemente se ocultan con opacidad en 0.

La máscara se hace invisible con scale en lugar de opacity porque se desea que al momento de colocar el puntero sobre la imagen incremente su tamaño desde 0 hasta 1 para dar la impresión que viene desde el fondo.

Una vez configuradas todas las reglas básicas definimos el resto de reglas que permiten animar los efectos en el hover del ratón.

.view:hover .mask { 
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}
.view:hover img { 
    transform: scale(0); 
    opacity: 0;
    transition-delay: 0s;
}  
.view:hover h2,
.view:hover p,
.view:hover a.info {
    opacity: 1;
    transition-delay: 0.5s;
}

Al colocar el puntero sobre el contenedor de la imagen se escala la máscara hasta su posición original y se rota hasta 0 grados. Esta combinación de propiedades consigue que aparezca desde el fondo de manera giratoria.

Por su parte la imagen se escala hasta 0 para hacerla desaparecer pero sin hacerla girar.

Hágase notar que la máscara tiene un delay de 0.2 segundos y la imagen no. Con eso conseguimos que primero desaparezca la imagen y luego aparezca la máscara.

Al resto de elementos se le coloca la opacidad en 1 una vez hayan transcurrido 0.5 segundos luego del hover, así se consigue que aparezcan justo cuando la máscara se ubique sobre la posición deseada.

Ya con esto tenemos el ejemplo listo y muy llamativo. Espero te haya gustado y leas el resto de publicaciones.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario