htmlcssimagemouseover

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


Solution

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