Acercamiento de la imagen y aparición de los textos

Acercamiento de la imagen y aparición de los textos
  • Eborio Linárez
  • November 18, 2012
  • 0

En este primer ejemplo aplicaremos varios efectos. El primero es acercar la imagen un poco para destacarla. Luego se colocará una capa de color naranja sobre la imagen. Y finalmente se harán aparecer desde arriba el título, desde abajo la descripción y desde el centro el botón.

A continuación podemos ver el ejemplo en vivo. También te invito a descargar este y el resto de ejemplos o visualizarlos directamente en GitHub.

See the Pen Acercamiento de la imagen y aparición de los textos by Eborio Linárez (@eborio) on CodePen.

El HTML a utilizar es el publicado en el post anterior.

Además del CSS base debemos crear algunos estilos adicionales que permitirán posicionar los elementos en el sitio deseado.

.view img {
    transition: all 0.2s linear;
}
.view .mask {
    opacity: 0;
    background-color: hsla(34, 93%, 45%, 0.7);
    transition: all 0.4s ease-in-out;
}
.view h2 {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
}
.view p { 
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.2s linear;
}
.view a.info {
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

Para cada uno de los elementos definimos una transición con la propiedad transition la cual le dará el movimiento deseado a cada uno.

El título y el párrafo para la descripción se mueven fuera del contenedor principal con la propiedad transform la cual permite mover el elemento en el eje Y utilizando translateY. Si deseamos moverlo hacia arriba se configura con valores negativos; si por el contrario se desea mover el elemento hacia abajo se configura con valores positivos.

A todos los elementos, excepto la imagen, se le coloca la opacidad opacity en 0 para que no sean visibles al inicio.

Ahora creamos los estilos CSS para ejecutar las transiciones sobre la imagen en el momento que el usuario coloque el puntero (hover) sobre tal imagen.

.view:hover img { 
    transform: scale(1.1);
} 
.view:hover .mask { 
    opacity: 1;
}
.view:hover h2,
.view:hover p,
.view:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view:hover p {
    transition-delay: 0.1s;
}
.view:hover a.info {
    transition-delay: 0.2s;
}

A la imagen se le aplica la propiedad scale la cual permite incrementar (si el valor es mayor a 1) o disminuir (si el valor es menor a 1) el tamaño de la imagen.

La capa que sirve de máscara .mask se muestra para que cubra la imagen y el resto de los elementos se mueven a su posición original utilizando transform nuevamente.

Tanto al párrafo como al enlace se les agrega un ligero retardo a la transición con transition-delay para que aparezcan sobre la imagen luego de que ésta haya sido escalada y la capa colocada sobre ella.

Lógicamente a todos los elementos se le coloca la opacidad en 1 para que puedan visualizarse.

Espero te haya gustado este primer ejemplo y veas el resto de los ejemplos y los compartas en las redes sociales. Al final de cada post encontrarás enlaces de utilidad referentes a los temas de los posts.

 

Comparte en las redes sociales

Comentarios

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

Deja un comentario