Como alterar a imagem em ondulação usando CSS

Passar é uma técnica que usa um dispositivo apontador para interagir com o elemento. Pode ser usado para selecionar ou estilizar vários elementos CSS, como botões, imagens, menus e muitos outros. A aplicação do mouse em um elemento mudará seu estado quando um mouse desencadear o evento especificado.

O objetivo deste manual é explorar como alterar uma imagem no mouse usando CSS. Então, vamos começar!

O que é: Passe o mouse no CSS?

O: o hover é um elemento de pseudo-classe usado para alterar o estado dos elementos html quando um mouse o desencadeia. Este seletor CSS é utilizado principalmente para estilizar ou selecionar elementos. No entanto, não pode ser aplicado a links.

Sintaxe

A sintaxe de: o hover é dada abaixo:

Elemento: Hover
Código CSS…

Aqui, "elemento”Refere -se ao elemento em que você deseja aplicar o efeito pairar.

Agora, passaremos para o exemplo prático de alterar a imagem no mouse usando CSS.

Exemplo: como mudar a imagem no passeio usando CSS?

Para alterar a imagem no Hover First, adicione duas imagens na seção HTML. A primeira imagem é para o estado ativo, e a próxima é para o estado de pairar.

Etapa 1: Adicione imagens

Para o propósito especificado, adicionaremos duas imagens, “Image1" e "Image2”, E atribua o nome da classe à segunda imagem como“hover_img”.

Html

Etapa 2: Imagens de estilo

Agora, vá para o CSS para definir a posição de ambas as imagens usando “posição" propriedade. Vamos definir sua posição como “absoluto”Para posicioná -lo absolutamente com referência ao seu pai mais próximo.

CSS

.img
Posição: Absoluto;

Isso mostrará o seguinte resultado:

Na próxima etapa, definiremos a segunda imagem na frente do primeiro. Para fazer isso, definiremos a posição da imagem como “absoluto”E defina a posição superior e esquerda como“0”. Usando esta imagem é colocada na frente da primeira imagem, mas queremos exibir a segunda imagem quando um mouse pair. Então, definindo o valor de exibição como “nenhum”Mostrará o resultado desejado:

.hover_img
Posição: Absoluto;
topo: 0;
Esquerda: 0;
Mostrar nenhum;

A saída do código fornecido é o seguinte:

A segunda imagem está escondida com sucesso atrás da primeira imagem.

Agora, vá para o próximo passo.

Etapa 3: Alterar a imagem no Hover

Em seguida, use “:flutuar”E selecione“.img”Para aplicar o mounding ao elemento selecionado. Em seguida, atribua o nome da classe da segunda imagem “.hover_img”. Depois disso, dentro dos parênteses, defina o valor da propriedade de exibição como “em linha”Que forçará o elemento a caber na mesma linha:

.IMG: Passe o mouse .hover_img
exibição: embutido;

Aqui está o resultado que demonstra que a imagem é alterada quando o usuário passa sobre ela:

A saída acima dada indica que mudamos com sucesso a imagem no mouse usando CSS.

Conclusão

A imagem pode ser alterada no passeio usando o “:flutuar”Elemento de pseudo-classe. Para fazer isso, adicione as imagens necessárias no arquivo html, defina -as na mesma posição usando CSS e aplique o: Seletor de pairar nelas. Como resultado, a primeira imagem mudará quando passará por ela. Neste artigo, explicamos como alterar uma imagem no passeio usando o: Passe o mousem com um exemplo prático.