Máscara y textos entrando en diagonal

Máscara y textos entrando en diagonal
  • Eborio Linárez
  • November 18, 2012
  • 0

En este ejemplo crearemos un efecto que permitirá que la máscara y los textos entren en diagonal hasta posicionarse sobre la imagen. Cada uno tendrá una dirección diferente para hacer más llamativo el ejemplo.

Para comenzar este ejemplo debemos modificar un poco el HTML publicado en el post HTML y CSS básicos para las transiciones, lo cual permitirá conseguir que la máscara entre de forma diagonal desde la parte inferior derecha sin afectar la orientación de los textos y el enlace.

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

Básicamente la modificación consiste en convertir el div que sirve de máscara .mask en una capa separada del resto de los elementos y se aplica una nueva clase que envuelve los elementos llamada .content.

A continuación podemos ver el resultado final en vivo.

See the Pen Máscara y textos entrando en diagonal by Eborio Linárez (@eborio) on CodePen.

Luego vamos a definir algunas reglas CSS para darle la ubicación inicial a los elementos.

.view img {
    transition: all 0.2s ease-in;
}
.view .mask {
    opacity: 0;
    width: 500px;
    height: 500px;
    background-color: hsla(213, 33% ,59%, 0.7);
    transition: all 0.2s ease-in-out;
    transform: translate(265px, 145px) rotate(45deg);
}
.view h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(200px, -200px);
    transition: all 0.2s ease-in-out;
}
.view p { 
    transform: translate(-200px, 200px);
    transition: all 0.2s ease-in-out;
}
.view a.info {
    transform: translate(0px, 100px);
    transition: all 0.2s 0.1s ease-in-out;
}

Al igual que el ejemplo anterior todos los elementos poseen una transición con la propiedad transition que se encarga de otorgarles el movimiento.

A la máscara .mask se le configuran tamaños por defecto para garantizar que cubra la totalidad de la imagen. También se le da un color azul y se desplaza a la derecha y a abajo con translate que a diferencia de translateY permite mover el elemento tanto en el eje X como en el Y. Recibe dos parámetros: el primero mueve el elemento a la izquierda (valores negativos) o a la derecha (valores positivos); y el segundo hace lo propio en el eje Y, hacia arriba (valores negativos) o hacia abajo (valores positivos).

También la máscara es rotada 45 grados a la derecha con rotate. Si se desea rotar hacia la izquierda se configura con valores negativos.

El resto de elementos no tienen nada especial, simplemente los movemos utilizando translate con diferentes valores para lograr la posición deseada.

Ahora creamos las reglas CSS que generaran el movimiento sobre los elementos.

.view:hover .mask { 
    opacity: 1;
    transform: translate(-80px, -125px) rotate(45deg);
}
.view:hover h2 { 
    transform: translate(0px, 0px);
    transition-delay: 0.3s;
}
.view:hover p {
    transform: translate(0px, 0px); 
    transition-delay: 0.4s;
}
.view:hover a.info {
    transform: translate(0px, 0px); 
    transition-delay: 0.5s;
}

La máscara se mueve 80px a la izquierda y 125px hacia arriba desde el centro del contenedor. Además se mantiene la rotación de 45 grados.

El resto de elementos se mueven hacia el centro con retrasos en la transición gracias a transition-delay, y gracias a su posición inicial aparecen en forma diagonal al igual que la máscara.

Espero te haya gustado hasta ahora el tutorial y continúes leyendo el resto de las publicaciones.

Puedes configurar las transiciones más lentas para que puedas apreciar detalladamente el movimiento que realiza cada elemento al colocar el puntero del ratón sobre la imagen.

Comparte en las redes sociales

Comentarios

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

Deja un comentario