Doble máscara entrando en diagonal

Doble máscara entrando en diagonal
  • Eborio Linárez
  • November 20, 2012
  • 0

En este ejemplo utilizaremos una doble máscara las cuales entrarán en diagonal, una desde la parte superior izquierda y otra desde la parte inferior derecha hasta unirse en el centro. Luego desde la unión de ambas máscaras hacemos aparecer la capa que contiene el resto de los elementos.

Para conseguir el objetivo del ejemplo es necesario modificar el HTML que hemos trabajado en la mayoría de los ejemplos debido a que requerimos dos máscaras en lugar de una y una capa contenedora adicional .content.

<div class="view">  
    <img src="/img/volkswagen-beetle.jpg" class="img-responsive">  
    <div class="mask mask-1"></div>
    <div class="mask mask-2"></div>
    <div class="content"> 
        <h2>Volkswagen Beetle 53</h2>  
        <p>
            Recuerdan el protagonista de la película “Herbie”, 
            pues Volkswagen a lanzado el Beetle 53 Edition.
        </p>  
        <a href="#" class="info">Leer Más</a>  
    </div>  
</div>

Antes de continuar veamos el ejemplo finalizado. Puede que el resultado que veas se distorsione, incluso las reglas CSS del ejemplo en vivo son diferentes a las publicadas en el post y esto se debe a que dependiendo del tamaño de la imagen que se muestre en pantalla variará la cantidad de grados que se deben girar las máscaras.

Si deseas asegurarte de ver el ejemplo de manera correcta puedes descargarlo desde GitHub.

See the Pen Doble máscara entrando en diagonal by Eborio Linárez (@eborio) on CodePen.

 Ahora definamos las reglas iniciales de cada uno de los elementos.

.view .mask-1,
.view .mask-2 {
    height: 500px;
    width: 500px;
    background: hsla(342, 100%, 23%, 0.5);
    transition: all 0.3s ease-in-out 0.6s;
}
.view .mask-1 { 
    left: auto;
    right: 0px;
    transform: rotate(58deg) translateX(-180px);
    transform-origin: 100% 0%;
}
.view .mask-2 { 
    top: auto;
    bottom: 0px;
    transform: rotate(58deg) translateX(180px);
    transform-origin: 0% 100%;
}
.view .content {
    background: hsla(0, 0%, 0%, 0.9);
    height: 0px;
    overflow: hidden;
    transform: rotate(-34deg) translate(-72px, 180px);
    transform-origin: 0% 100%;
    transition: all 0.4s ease-in-out 0.3s;
}
.view h2 {
    background: transparent;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
}

Ahora contamos con dos máscaras llamadas .mask-1 y .mask-2 a las cuales les definimos tamaños fijos para garantizar que cubran la imagen al momento de colocar el puntero del ratón sobre el contenedor.

La máscara .mask-1 se desplaza a la izquierda y se gira 58 grados a la derecha. Por su parte la máscara .mask-2 se desplaza hacia la derecha y también se gira 58 grados.

La capa .content se rota 34 grados a la izquierda a la vez que se mueve 72 píxeles a la izquierda y 180 hacia abajo.

La cantidad de grados a girar dependerá del tamaño de la imagen y su contenedor. Es cuestión de ensayo y error hasta conseguir el resultado deseado.

 Definimos también a las máscaras una nueva propiedad llamada transform-origin que no habíamos utilizado hasta ahora. Ésta propiedad permite cambiar el eje de rotación del elemento, el primer parámetro cambia el eje X y el segundo cambia el eje Y. A la capa .content al igual que las máscaras se le cambia el eje de giro.

Por último el título se le coloca un fondo transparente y un borde inferior.

Si deseas conocer más sobre transform-origin visita el enlace sobre el tema publicado en los enlaces al final del post.

Ahora definimos las reglas a ejecutarse en el hover del ratón.

.view:hover .content {
    height: 190px;
    top: 10px;
    transform: rotate(0deg) translate(0px, 0px);
}
.view:hover .mask-1,
.view:hover .mask-2 {
    transition-delay: 0s;
}
.view:hover .mask-1 {
    transform: rotate(58deg) translateX(1px);
}
.view:hover .mask-2 {  
    transform: rotate(58deg) translateX(-1px);
}

El contenido .content se le asigna altura para hacerlo visible y haga parecer que sale desde la unión de ambas máscaras. Adicionalmente se posiciona a 10 píxeles del tope. Se rota a 0 grados y se coloca en el centro.

Cada una de las máscaras se mueven hacia el centro del contenedor y se mantiene la rotación original para que se posicionen de manera diagonal.

Al definir translateX(1px) para .mask-1 y translateX(-1px) para .mask-2 se consigue que aparezca una línea delgada en la unión de ambas máscaras.

Y de esa manera finalizamos este ejemplo. Recuerda compartirlo en las redes sociales y nos vemos en el siguiente y último del tutorial.

Comparte en las redes sociales

Comentarios

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

Deja un comentario