[Dúvida] Hover mudar a imagem

Oi, Guilherme, tudo bem?

Para alterar a imagem com o fundo ao fazer um .hover, você pode usar a propriedade background-image no CSS. Por exemplo, suponha que você tem um botão com a classe .meu-botao e deseja alterar a imagem de fundo quando o usuário passa o mouse sobre ele.

HTML

<button class="meu-botao">Clique aqui</button>

CSS

.meu-botao {
    background-color: #fff; /* Cor de fundo inicial */
    background-image: url('imagem-inicial.jpg'); /* Imagem de fundo inicial */
    background-size: cover; /* Ajusta a imagem ao tamanho do botão */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

.meu-botao:hover {
    background-color: #272727; /* Cor de fundo ao passar o mouse */
    background-image: url('imagem-hover.jpg'); /* Imagem de fundo ao passar o mouse */
}

Neste exemplo, ao passarmos o mouse sobre o botão, tanto a cor de fundo quanto a imagem de fundo são alteradas. Isso acontece, pois a classemeu-botao define o estilo inicial do botão, incluindo a imagem de fundo (imagem-inicial.jpg), enquanto a mesma classe, porém com o uso da pseudoclasse hover (meu-botao:hover) define as alterações que ocorrem quando o mouse está sobre o botão, incluindo a nova imagem de fundo (imagem-hover.jpg) e a nova cor de fundo.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!