Aparición de los textos desde el fondo

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

En este ejemplo haremos que los textos aparezcan desde el fondo y la imagen desaparezca acercándose al frente. Los textos irán aumentando su tamaño a medida que la imagen también lo va haciendo hasta que la imagen desaparece y los textos se posicionan en su ubicación final.

El HTML a utilizar es otra vez el del post HTML y CSS básicos para las transiciones.

Veamos el ejemplo finalizado antes de continuar.

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

Configuremos las reglas iniciales para los elementos.

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

Se le agrega una transición a cada uno de los elementos y opacidad en 0 excepto a la imagen.

El título, párrafo y enlace se les aplica scale en 0 para que inicialmente no sean visibles.

Ahora, definimos las reglas del evento hover del ratón.

.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;
}

La imagen se escala 10 veces y se le aplica una opacidad de 0 para conseguir que la imagen se acerque hacia el frente hasta desaparecer.

La máscara se hace visible así como el resto de los elementos. Adicionalmente el título, párrafo y enlace se escalan hasta 1 para hacerlos aparecer desde el fondo.

Con este post finalizamos el tutorial. Espero te hayan gustado cada uno de los ejemplos y le saques provecho. También te agradezco lo compartas en tus redes sociales. Muchas gracias por seguirlo.

Comparte en las redes sociales

Comentarios

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

Deja un comentario