Desplazamiento lateral de la imagen y textos

Desplazamiento lateral de la imagen y textos
  • Eborio Linárez
  • November 19, 2012
  • 0

Continuamos con el tutorial y ahora crearemos un ejemplo en donde aplicaremos un desplazamiento lateral tanto a la imagen como a los textos. Parecerá que la máscara junto con los textos empuja de derecha a izquierda la imagen hasta sacarla del contenedor.

El HTML es el mismo utilizado en los últimos ejemplos. Si no has visto el resto de ejemplos puedes encontrar el HTML y CSS básico para las transiciones haciendo clic aquí.

Veamos a continuación el ejemplo.

See the Pen Desplazamiento lateral de la imagen y textos by Eborio Linárez (@eborio) on CodePen.

Procedemos a definir las reglas iniciales para los elementos.

.view img {
    transition: all 0.3s ease-in-out; 
}
.view .mask {
    background-color: hsla(5, 23%, 46%, 0.3);
    transform: translateX(-400px);
    transition: all 0.4s ease-in-out; 
}
.view h2 {
    background: hsla(0, 0%, 100%, 0.5);
    color: hsl(0, 0%, 0%);
    box-shadow: 0 1px 3px hsla(3, 9%, 59%, 0.5);
}
.view p {
    opacity: 0;
    color: #333;
    transition: all 0.2s linear;
}

Ya debes haberte familiarizado con el código. Así que no explicaré mucho lo que hace cada una de las reglas. Si deseas mayor información puedes ir a los ejemplos anteriores.

Luego procedemos a crear las reglas que se ejecutaran en el hover del ratón.

.view:hover .mask { 
    transform: translateX(0px);
}
.view:hover img    { 
    transform: translateX(400px);
    transition-delay: 0.1s;
}  
.view:hover p {
    opacity: 1;
    transition-delay: 0.4s;
}

Las reglas definidas son muy sencillas. La máscara se traslada hacia el píxel 0 del eje X, con lo que se desplaza a la derecha debido a que su posición inicial era a la izquierda.

Luego la imagen se desplaza a la derecha. De esa manera genera la impresión que la máscara empuja de izquierda a derecha la imagen. Finalmente se hace visible el párrafo 0.4 segundos después.

De esta manera finalizamos este post y de nuevo te invito a continuar leyendo el resto de publicaciones y compartirlas en las redes sociales. Gracias por tu apoyo.

Comparte en las redes sociales

Comentarios

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

Deja un comentario