Como criar um efeito de hover em uma imagem em CSS

Para criar um efeito de hover em uma imagem em CSS, você pode usar a propriedade :hover.

Por exemplo, vamos supor que você tenha o seguinte código HTML para exibir uma imagem:

<img src="imagem.jpg" alt="Imagem" />

Para aplicar um efeito de hover na imagem, você pode adicionar a seguinte regra CSS:

img:hover {
  opacity: 0.8;
}

Neste exemplo, a propriedade opacity é usada para diminuir a opacidade da imagem quando o usuário passa o mouse sobre ela. Você pode ajustar o valor da opacidade para alcançar o efeito desejado.

Também é possível aplicar outras propriedades CSS para alterar o comportamento visual da imagem quando o usuário passa o mouse sobre ela, como transform, scale, rotate, box-shadow e muito mais. O limite é a sua criatividade!

Aqui está um exemplo mais completo que combina algumas dessas propriedades para criar um efeito de zoom suave na imagem:

img {
  transition: all 0.3s ease-in-out;
}

img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Neste exemplo, a imagem é ampliada em 10% quando o usuário passa o mouse sobre ela e uma sombra é adicionada em torno dela para destacá-la. A propriedade transition é usada para suavizar a transição de tamanho da imagem.