Solucionado
<h4><img class="img-rachel" src="rachel.png"></h4>.img-rachel {
width: 352px;
height: 400px;
border: 2px solid #FFFFFF;
border-radius: 15px;
margin: 0 0 16px 0;
}
.img-rachel:hover {
background-image: url("jennifer.png");
}--> Estou tentando usar o hover para aparecer outra imagem, porém não estou conseguindo, já tentei de vários jeitos. Não sei no que estou errando, alguém pode me ajudar?
hoje, com a Alura e o Google Gemini
Oi, Debora, tudo bem?
Você deve chamar a imagem dentro do css, como você fez em .img-rachel:hover, assim, a imgame será trocada, um exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
.card {
width: 130px;
height: 195px;
background: url("/images/foto1.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("/images/foto2.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>No exemplo acima, foi criada uma <div class="card"></div> onde a imagem é alocada dentro e depois é trocada quando o hover é acionado pelo hover. Testa e me fala se deu certo!
Funcionou! Muito obrigadaa