`Hello everyone I have this card in an html document that I am developing, it has an image set but I want it to change the image to another when I mouse over it and when I remove it it returns to normal. How can I do it, I have read other posts about it but they change the background of the card and I would like to change the image without modifying the card itself
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-6">
<!-- 1 Alexis -->
<div class="col" style="margin-bottom: 2rem;">
<div class="card card-team h-100">
<div style="text-align: center;">
<img src="./src/img/nosotros/AlexisSanchez.jpeg"
style="width: 150px; height: 150px; margin-top: 1rem;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);"
class="img-fluid rounded" alt="Alexis">
</div>
<div class="card-body">
<div class="title__card">
<span>Alexis Sánchez León</span>
</div>
<div class="subtitle__card">
<span>Desarrollador Java | Ing. Industrial</span>
</div>
<p class="card-text" style="text-align: justify;">Soy un desarrollador Java, enfocado en
el frontend y en la gestión de proyectos con el marco de trabajo SCRUM para la
entrega de valor oportuna.</p>
</div>
<!-- redes sociales -->
<div class="social__media card-footer ">
<a href="https://github.com/ALEXISSL10" target="_blank"><span><i
class="bi bi-github social__media__icon"></i></span></a>
<a href="https://www.linkedin.com/in/alexis-s%C3%A1nchez-le%C3%B3n"
target="_blank"><span><i class="bi bi-linkedin social__media__icon"></i></span></a>
</div>
</div>
</div>
`
I try to change the image inside the card
.static {
position:absolute;
background: white;
}
.static:hover {
opacity:0;
}
<div class="col" style="margin-bottom: 2rem;">
<div class="card card-team h-100">
<div style="text-align: center;">
<img src="src/img/nosotros/alexis-normal.jpg" style="width: 150px; height: 150px; margin-top: 1rem;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);"
class="img-fluid rounded static" alt="Alexis"><img class="active" src="src/img/nosotros/alexis-pintado.jpg" style="width: 150px; height: 150px; margin-top: 1rem;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);"
class="img-fluid rounded" alt="Alexis">
</div>
<div class="card-body">
<div class="title__card">
<span>Alexis Sánchez León</span>
</div>
<div class="subtitle__card">
<span>Desarrollador Java | Ing. Industrial</span>
</div>
<p class="card-text" style="text-align: justify;">Soy un desarrollador Java, enfocado en
el frontend y en la gestión de proyectos con el marco de trabajo SCRUM para la
entrega de valor oportuna.</p>
</div>
<!-- redes sociales -->
<div class="social__media card-footer ">
<a href="https://github.com/ALEXISSL10" target="_blank"><span><i
class="bi bi-github social__media__icon"></i></span></a>
<a href="https://www.linkedin.com/in/alexis-s%C3%A1nchez-le%C3%B3n"
target="_blank"><span><i class="bi bi-linkedin social__media__icon"></i></span></a>
</div>
</div>
</div>