Solucionado
Consegui aplicar o hover para fazer a alteração de cor de um elemento criado no css, como foi exemplificado no artigo, porém gostaria de saber se consigo utilizar esse mesmo recurso para alterar uma imagem da mesma forma, quando o cursor do mouse passar pela imagem ela seja alterada para uma segunda imagem? Ou se existe algum outro recurso que realize essa função, desde já agradeço!
hoje, com a Alura e o Google Gemini
Olá! Consegui ativar o hover da imagem principal e uma segunda imagem se sobrepôs a esta, ocultando a primeira através dos seguintes códigos:
No arquivo .html criei uma divclass container que abrigou duas imagens, uma principal e a outra que só aparecerá quando o hover estiver ativado.
<body>
<div class="imgContainer">
<img class="img_main" src="/assets/Plataformas.png" alt="imagemTest1">
<img class="img_hoverActive" src="/assets/Telas.png" alt="imagemTest2">
</div>
</body>
No arquivo .css: Primeiro, defini as configurações do container,
.imgContainer {
display: inline-block;
position: relative;
}
depois... fiz com que a segunda imagem se tornasse absoluta e já se sobrepujasse a principal, mas alterei sua opacidade com o valor 0, assim a escondendo-a.
.img_hoverActive {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
Por fim, criei um hover para o container, mas direcionando alterações diferentes para cada imagem, somente alterando a opacidade das duas, para que ao ativar o hover da imagem principal, a primeira se apagasse e a segunda aparecesse.
.imgContainer:hover .img_main {
opacity: 0;
}
.imgContainer:hover .img_hoverActive {
opacity: 1;
}
Espero que tenha lhe ajudado.