Como criar um efeito de sobreposição de imagem no mouse?

Inserir imagens simples em suas páginas da web é uma maneira de aprimorar a aparência deles, no entanto, adicionar vários efeitos às imagens pode embelezar ainda mais as páginas da web e criar uma experiência incrível do usuário. Uma categoria interessante de efeitos que você pode adicionar às imagens são os efeitos de sobreposição. Esses efeitos são colocados na parte superior das imagens e são usados ​​junto com um efeito de pairar. Portanto, eles aparecem apenas quando o usuário traz o mouse para a imagem.

Os tipos de efeitos discutidos neste post são.

1. Desaparecer
2. Slide Top
3. Deslize inferior
4. Deslize para a esquerda
5. Deslize para a direita

Vamos aprender a implementá -los com a ajuda de exemplos.

Antes de pular para adicionar qualquer tipo de efeito de sobreposição de imagem, vamos primeiro inserir uma imagem em nossa página da web:

Html

No código acima, criamos dois contêineres de div. O primeiro contêiner da Div com a classe “div” mantém a imagem e outro contêiner de div, que manterá o efeito de sobreposição da imagem que aparece quando o usuário paira sobre a imagem.

Saída

Uma imagem foi inserida com sucesso na página da web.

Agora que incluímos a imagem, aprenderemos a adicionar os vários efeitos de sobreposição de imagem declarados no início do artigo.

Efeito de sobreposição de desbotamento

Com o objetivo de adicionar um efeito de sobreposição de desbotamento na imagem, siga o código abaixo.

CSS

.imagem
Largura: 250px;
Altura: 250px;

.div
Posição: relativa;
Largura: 450px;

.sobreposição
Posição: Absoluto;
transição: tudo 0.4s facilitar;
opacidade: 0;

.Div: Passe o mouse .sobreposição
Opacidade: 0.8;

.Fadeeffect
Altura: 250px;
Largura: 250px;
topo: 0;
Esquerda: 100px;
Background-Color: Whitesmoke;

Antes de tudo, estamos definindo alguma largura e altura da imagem e depois ajustando a posição do primeiro contêiner de div como relativo, para que possamos posicionar absolutamente o segundo recipiente de div. Que contém o efeito de sobreposição.

Depois de posicionar os dois contêineres da Div, estamos usando a propriedade abreviada de transição para dar um efeito de transição a todos os elementos por uma duração de 0.4 segundos de maneira “facilidade”. Enquanto isso, a opacidade antes que o efeito do pairar tenha sido definido como 0, enquanto que, quando o usuário paira a opacidade do efeito de sobreposição foi definido como 0.8.

Por fim, estamos dando alguma largura e altura ao efeito de sobreposição de desbotamento. A largura e a altura da imagem antes e depois da aplicação da sobreposição devem ser a mesma, para que o efeito seja colocado exatamente sobre a imagem. Além disso, usamos as propriedades superior e esquerda para posicionar o efeito exatamente na parte superior da imagem e atribuímos uma cor de fumaça branca.

Saída

Um efeito de sobreposição de desbotamento foi implementado com sucesso.

Slide Top Overlay Effect

Considere o código abaixo para entender como adicionar um efeito de sobreposição de slide em uma imagem.

CSS

.imagem
Largura: 250px;
Altura: 250px;

.div
Posição: relativa;
Largura: 450px;

.sobreposição
Posição: Absoluto;
transição: tudo 0.4s facilitar;
opacidade: 0;

.Div: Passe o mouse .sobreposição
Opacidade: 0.8;

.Slidetopeffect
Largura: 250px;
altura: 0;
topo: 0;
Direita: 100px;
Background-Color: Whitesmoke;

.Div: Passe o mouse .Slidetopeffect
Altura: 250px;

O estilo e a posição dos contêineres da div e a imagem são os mesmos até o ajuste da opacidade do efeito do pairar.

Com o objetivo de adicionar um efeito de sobreposição de slides à imagem, definimos a largura do efeito de sobreposição da mesma forma que a largura da imagem e para colocá -la na parte superior da imagem, usamos as propriedades superior e direita. Além disso, para deslizar o efeito de cima, ajustamos a altura do efeito de sobreposição para zero antes do efeito do mouse. No entanto, uma vez que o usuário traga o mouse sobre a imagem, a altura do efeito será a mesma que a da imagem.

Saída

Um efeito de sobreposição de slide superior criado com grande facilidade.

Slide Bottom Overlay Effect

Abaixo, fornecemos o código com o qual adicionaremos um efeito de sobreposição inferior do slide na imagem.

CSS

.imagem
Largura: 250px;
Altura: 250px;

.div
Posição: relativa;
Largura: 450px;

.sobreposição
Posição: Absoluto;
transição: tudo 0.4s facilitar;
opacidade: 0;

.Div: Passe o mouse .sobreposição
Opacidade: 0.8;

.SlideBottomeffect
altura: 0;
Largura: 250px;
Inferior: 3px;
Esquerda: 100px;
Background-Color: Whitesmoke;

.Div: Passe o mouse .SlideBottomeffect
Altura: 300px;

O restante do código é o mesmo usado no exemplo acima, no entanto, para colocar o efeito na parte superior da imagem, usamos as propriedades inferiores e corretas e, para deslizar o efeito de baixo, estamos atribuindo a mesma altura ao efeito como o da imagem no passeio.

Saída

O efeito de sobreposição inferior do slide foi adicionado com sucesso.

Deslize o efeito de sobreposição esquerda

Consulte o código abaixo para adicionar um efeito de sobreposição da esquerda na imagem.

CSS

.imagem
Largura: 250px;
Altura: 250px;

.div
Posição: relativa;
Largura: 450px;

.sobreposição
Posição: Absoluto;
transição: tudo 0.4s facilitar;
opacidade: 0;

.Div: Passe o mouse .sobreposição
Opacidade: 0.8;

.SlideLefteffect
Altura: 250px;
largura: 0;
topo: 0;
Esquerda: 100px;
Background-Color: Whitesmoke;

.Div: Passe o mouse .SlideLefteffect
Largura: 250px;

Com o objetivo de adicionar um efeito de sobreposição esquerdo da lâmina na imagem, definimos a altura para 250px, que é a mesma que a altura da imagem e largura para 0px antes do efeito do mouse. Enquanto isso, para posicionar o efeito corretamente na imagem que usamos as propriedades superior e esquerda. E, finalmente, após o efeito do pau, a largura foi definida como 250px, que é a mesma que a largura da imagem.

Saída

O efeito esquerdo do slide está funcionando corretamente.

Slide direita Efeito de sobreposição

O último efeito de sobreposição que vamos demonstrar é o efeito de sobreposição direita do slide. Siga o código abaixo.

CSS

.imagem
Largura: 250px;
Altura: 250px;

.div
Posição: relativa;
Largura: 450px;

.sobreposição
Posição: Absoluto;
transição: tudo 0.4s facilitar;
opacidade: 0;

.Div: Passe o mouse .sobreposição
Opacidade: 0.8;

.SliderIightEffect
Altura: 250px;
largura: 0;
topo: 0;
Direita: 100px;
Background-Color: Whitesmoke;

.Div: Passe o mouse .SliderIightEffect
Largura: 250px;

Para criar um efeito de sobreposição direita da slide na imagem, atribuímos alguns valores ao topo e as propriedades corretas enquanto isso, mantendo a altura do efeito de sobreposição o mesmo da imagem e largura do efeito a 0px antes do efeito do pairar. No entanto, ao adicionar o efeito de pairar, a largura foi ajustada para 250px semelhante à da imagem.

Saída

Um efeito de sobreposição da direita do slide foi adicionado com sucesso à imagem.

Conclusão

Com o objetivo de adicionar efeitos de sobreposição às imagens necessárias para colocá -las dentro de um contêiner div e usar várias propriedades CSS para adicionar efeitos de sobreposição sobre eles. Adicionar esses efeitos às imagens pode ser uma maneira interessante de aprimorar a beleza das páginas da web. Existem vários efeitos de sobreposição que você pode adicionar às suas imagens, como desbotamento, slide top, deslize para a esquerda e deslize para a direita. Esses efeitos podem ser adicionados usando várias propriedades CSS. Este artigo demonstra como adicionar vários efeitos de sobreposição de imagem no mouse com a ajuda de exemplos relevantes.