Change a picture with a hover in css

`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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.static {
position:absolute;
background: white;
}
.static:hover {
opacity:0;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->