Estilizando a página produtos.html - image transition

Oi, Luiz, tudo bem?

Eu to testando os seu projeto como disponibilizado. Sobre a questão no navegador, ambos estão com o mesmo comportamento. Seja no Firefox, seja no Chrome. Mas tem um problema, você não disponibilizou as imagens de transição, que são as barba2.jpg, cabelo2.jpg e cabelobarba2jpg. Sem elas não tenho como testar igualzinho como você está fazendo aí. Compartilha os seus arquivos de imagens conosco :}

Esqueci de colocar https://imgur.com/a/sZUtmzY

Pode usar o imgur mesmo? Qual posso utilizar para enviar imagens?

Oi, Luiz.

Utilizei as imagens que colocou no link acima e acho que entendi o que quis falar sobre a animação. Mas acho que temos um problema com o formato das imagens, por não serem png ou svg, as transição entre elas sempre terá essa "mancha" branca da imagem padrão para o hover, o que pode melhorar é colcoar uma largura para elas:

#produto-cabelo,
#produto-barba,
#produto-cabelobarba {
  transition: 600ms, border 0s;
  width: 230px;
}

Esse curso aqui de cvg da alura ensina como trabalhar animações com imagens svg: https://www.alura.com.br/curso-online-svg-css-animacao

Espero ter te ajudado!

Não entendi como mudar a largura pode me ajudar Não mudou nada pra mim 🙁

Outra coisa, no Chrome ta perfeito. Se esperar a animação acabar, para então acionar com o hover de novo fik perfeito Mas se colocar o mouse de novo acima do elemento antes da animação ter terminado , ou se tirar o mouse do elemento antes da animação ter terminado, aparece o fundo branco Já o Firefox não faz o transition do background-image

Oi, Luiz, eu sugeri alterar a largura, pois as imagens estão com tamanhos diferentes. Quando passava o mouse, ela ultrapassava a borda do elemento.

Sobre o transition, é isso do fundo branco que mencionei, se o usuário mover rápido o mouse não esperando a animação acabar, essa fundo branco a aparece, mas como te falei, o tipo de imagem jpg não permite que façamos animações tão legais com elas. E sobre o navegador, eu uso o Firefox Developer Edition, e funcinou igual ao Chrome. Nesse link, no final, você vê a compatibilidade da proprieade com as vesões dos browsrs: https://developer.mozilla.org/pt-BR/docs/Web/CSS/transition

Espero ter te ajudado!

Entendi, vou conferir o curso utilizando svg então e ver se consigo resolver o problema.

Obrigado!