Aparición de los textos desde el frente

Aparición de los textos desde el frente
  • Eborio Linárez
  • November 19, 2012
  • 0

El objetivo del ejemplo es conseguir que los textos aparezcan desde el frente hasta posicionarse sobre la imagen, dando así la impresión que se van acercando hasta llegar a la posición deseada. Durante el movimiento de los textos se observan difuminados por el gran tamaño inicial que poseen.

Volvemos a utilizar el HTML básico presentado en el post HTML y CSS básicos para las transiciones. Ahora veamos el ejemplo en vivo antes de continuar.

See the Pen Aparición de los textos desde el frente by Eborio Linárez (@eborio) on CodePen.

 Creamos como es de costumbre las primeras reglas CSS para dar la posición inicial a los elementos.

.view img { 
    transition: all 0.4s ease-in-out 0.5s; 
}
.view .mask { 
    background-color: hsla(5, 23%, 46%, 0.5);
    opacity: 0;
    transition: all 0.3s ease-in 0.4s;
}
.view h2 {
    opacity: 0;
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.3);
    background: transparent;
    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;
}

Todas las reglas definidas ya las hemos trabajado en las publicaciones anteriores. Solo debes tener especial atención a scale la cual hemos establecido en 10 con lo que conseguimos que el tamaño del título y el párrafo sean 10 veces el original.

Luego configuramos las reglas que se ejecutaran en el 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;
}

A la máscara y la imagen se le aplica transition-delay de 0 segundos para garantizar que el efecto se aplica justamente al colocar el ratón sobre el contenedor.

El resto de configuraciones son básicas, solo debes prestar atención a scale configurado en 1 para que los elementos vuelvan a su tamaño original. De esta forma se consigue el efecto deseado haciendo que los textos se acerquen desde el frente hasta posicionarse en sus respectivos lugares.

Así finalizamos este ejemplo. Compártelo y nos vemos en el siguiente.

Comparte en las redes sociales

Comentarios

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

Deja un comentario