Cómo crear un efecto de superposición de imagen en el flotador?

Sin embargo, insertar imágenes simples en sus páginas web es una forma de mejorar su aspecto, agregar varios efectos a las imágenes puede embellecer aún más las páginas web y puede crear una experiencia de usuario increíble. Una categoría interesante de efectos que puede agregar a las imágenes son los efectos de superposición. Estos efectos se colocan en la parte superior de las imágenes y se usan junto con un efecto flotante. Por lo tanto, aparecen solo cuando el usuario lleva el mouse a la imagen.

Los tipos de efectos discutidos en esta publicación son.

1. Desteñir
2. Tapa de deslizamiento
3. Fondo de deslizamiento
4. Diapositiva a la izquierda
5. Deslizamiento a la derecha

Aprendamos a implementarlos con la ayuda de ejemplos.

Antes de saltar para agregar cualquier tipo de efecto de superposición de imagen, primero insertemos una imagen en nuestra página web:

Html

En el código anterior, hemos creado dos contenedores DIV. El primer contenedor DIV con la clase "Div" contiene la imagen, así como otro contenedor DIV que contendrá el efecto de superposición de la imagen que aparece cuando el usuario se cierne sobre la imagen.

Producción

Se ha insertado una imagen correctamente en la página web.

Ahora que hemos incluido la imagen, aprenderemos cómo agregar los diversos efectos de superposición de imágenes establecidos al comienzo del artículo.

Efecto superpuesto de desvanecimiento

Con el fin de agregar un efecto de superposición de desvanecimiento en la imagen, siga el código a continuación.

CSS

.imagen
Ancho: 250px;
Altura: 250px;

.div
Posición: relativo;
Ancho: 450px;

.Superposición
Posición: Absoluto;
Transición: todos 0.4s facilidad;
Opacidad: 0;

.Div: flotante .Superposición
Opacidad: 0.8;

.Fadeefefect
Altura: 250px;
Ancho: 250px;
arriba: 0;
Izquierda: 100px;
Color de fondo: Whitesmoke;

En primer lugar, estamos estableciendo algún ancho y altura de la imagen y luego ajustando la posición del primer contenedor Div como pariente para que podamos colocar absolutamente el segundo contenedor DIV que contiene el efecto superpuesto.

Después de colocar los dos contenedores Div, estamos utilizando la propiedad de transición taquigrafía para dar un efecto de transición a todos los elementos durante una duración de 0.4 segundos de manera "facilidad". Mientras tanto, la opacidad antes del efecto de desplazamiento se ha establecido en 0, mientras que, cuando el usuario flota la opacidad del efecto de superposición se ha establecido en 0.8.

Por último, estamos dando algo de ancho y altura al efecto de superposición de desvanecimiento. El ancho de la imagen y la altura antes y después de aplicar la superposición deben ser los mismos para que el efecto se coloque exactamente en la parte superior de la imagen. Además, hemos utilizado las propiedades superior e izquierda para colocar el efecto exactamente en la parte superior de la imagen y le han asignado un color de humo blanco.

Producción

Se implementó un efecto de superposición de desvanecimiento con éxito.

Deslice el efecto de superposición superior

Considere el siguiente código para comprender cómo agregar un efecto de superposición superior de diapositivas en una imagen.

CSS

.imagen
Ancho: 250px;
Altura: 250px;

.div
Posición: relativo;
Ancho: 450px;

.Superposición
Posición: Absoluto;
Transición: todos 0.4s facilidad;
Opacidad: 0;

.Div: flotante .Superposición
Opacidad: 0.8;

.Slidetopeffect
Ancho: 250px;
Altura: 0;
arriba: 0;
Derecha: 100px;
Color de fondo: Whitesmoke;

.Div: flotante .Slidetopeffect
Altura: 250px;

El estilo y la posición de los contenedores Div y la imagen son los mismos hasta el ajuste de la opacidad del efecto flotante.

Con el fin de agregar un efecto de superposición superior de diapositivas a la imagen, hemos establecido el ancho del efecto de superposición igual que el ancho de la imagen y para colocarlo en la parte superior de la imagen, hemos usado las propiedades superior y derecha. Además, para deslizar el efecto desde la parte superior, hemos ajustado la altura del efecto de superposición a cero antes del efecto flotante. Sin embargo, una vez que el usuario trae el mouse sobre la imagen, la altura del efecto será la misma que la de la imagen.

Producción

Un efecto de superposición superior de diapositivas creado con gran facilidad.

Efecto de superposición de fondo de deslizamiento

A continuación le proporcionamos el código con el que agregaremos un efecto de superposición de fondo de deslizamiento en la imagen.

CSS

.imagen
Ancho: 250px;
Altura: 250px;

.div
Posición: relativo;
Ancho: 450px;

.Superposición
Posición: Absoluto;
Transición: todos 0.4s facilidad;
Opacidad: 0;

.Div: flotante .Superposición
Opacidad: 0.8;

.Slidebottomefect
Altura: 0;
Ancho: 250px;
Abajo: 3px;
Izquierda: 100px;
Color de fondo: Whitesmoke;

.Div: flotante .Slidebottomefect
Altura: 300px;

Sin embargo, el resto del código es el mismo que el utilizado en el ejemplo anterior, para colocar el efecto en la parte superior de la imagen, hemos usado las propiedades inferiores y derechas y para deslizar el efecto desde la parte inferior, estamos asignando la misma altura al efecto como el de la imagen en el flotador.

Producción

El efecto de superposición inferior de la diapositiva se agregó con éxito.

Efecto de superposición de portaobjetos de deslizamiento

Consulte el código a continuación para agregar un efecto de superposición de diapositivas en la imagen.

CSS

.imagen
Ancho: 250px;
Altura: 250px;

.div
Posición: relativo;
Ancho: 450px;

.Superposición
Posición: Absoluto;
Transición: todos 0.4s facilidad;
Opacidad: 0;

.Div: flotante .Superposición
Opacidad: 0.8;

.SlideleftEffect
Altura: 250px;
Ancho: 0;
arriba: 0;
Izquierda: 100px;
Color de fondo: Whitesmoke;

.Div: flotante .SlideleftEffect
Ancho: 250px;

Con el fin de agregar un efecto de superposición de la diapositiva en la imagen, hemos establecido la altura en 250px, que es la misma que la altura de la imagen y el ancho a 0px antes del efecto de desplazamiento. Mientras tanto, para colocar el efecto correctamente en la imagen, hemos usado las propiedades superior e izquierda. Y, por último, después del efecto flotante, el ancho se ha establecido en 250px, que es el mismo que el ancho de la imagen.

Producción

El efecto de la izquierda de la diapositiva funciona correctamente.

Deslice el efecto de superposición derecha

El último efecto de superposición que vamos a demostrar es el efecto de superposición derecha de diapositivas. Sigue el código a continuación.

CSS

.imagen
Ancho: 250px;
Altura: 250px;

.div
Posición: relativo;
Ancho: 450px;

.Superposición
Posición: Absoluto;
Transición: todos 0.4s facilidad;
Opacidad: 0;

.Div: flotante .Superposición
Opacidad: 0.8;

.SliderLightEffect
Altura: 250px;
Ancho: 0;
arriba: 0;
Derecha: 100px;
Color de fondo: Whitesmoke;

.Div: flotante .SliderLightEffect
Ancho: 250px;

Para crear un efecto de superposición derecha de deslizamiento en la imagen, hemos asignado algunos valores a la parte superior y, mientras que las propiedades correctas mantienen la altura del efecto de superposición igual que la de la imagen y el ancho del efecto a 0px antes del efecto flotante. Sin embargo, al agregar el efecto de desplazamiento, el ancho se ha ajustado a 250px similar al de la imagen.

Producción

Un efecto de superposición derecha de diapositivas se agregó con éxito a la imagen.

Conclusión

Con el fin de agregar efectos de superposición a las imágenes, debe colocarlas dentro de un contenedor Div y usar varias propiedades de CSS para agregar efectos de superposición sobre ellas. Agregar este efecto a las imágenes puede ser una forma interesante de mejorar la belleza de las páginas web. Hay múltiples efectos de superposición que puede agregar a sus imágenes, como desvanecer, deslizar la parte superior, deslizar la izquierda y deslizar a la derecha. Estos efectos se pueden agregar utilizando varias propiedades de CSS. Este artículo demuestra cómo agregar varios efectos de superposición de imágenes en el flotador con la ayuda de ejemplos relevantes.