'Change background image on hover?

Would the proportions of the image have anything to do with the problem?

<style>
.img1:hover { background-image: url({%static 'images/img2.gif' %});
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
</style>

I want it to change to a different picture(img2) when I hover over img1. I am using Django. Hover doesn't work even if I upload the current picture! I'm new to css.

<body>
<div class="container-fluid2" style="padding-right:20%;padding-bottom:5%;" >
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000">
                <a href="#"><img src="{%static 'images/img1.jpg' %}" class="img1 card-img-top" ></a>
                
            <div class="card-body">
                <div class="card-title"><h5><br>poketmon <br>poketmon </h5></div>
                <p class="card-text">category: RPG <br>simple:sample &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>poketmon : Nintendo Switch<br>all age</p>
            </div>
            <div id="btn_group">
                <button id="test_btn2">detail</button>
            </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000" >
                <a href="#"><img src="{%static 'images/pic2.jpg' %}" class="card-img-top" alt="..."></a>
            <div class="card-body">
                <div class="card-title"><h5><br>game2<br><br></h5></div>
                <p class="card-text">category: RPG <br>sample: sample &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>device: Nintendo Switch<br>all ages</p>
            </div>
            <div id="btn_group">
                <button id="test_btn2">detail</button>
            </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-60 w-80" data-aos="fade-up" data-aos-duration="3000">
                <a href="#"><img src="{%static 'images/pic3.jpg' %}" class="card-img-top" alt="..."></a>
            <div class="card-body">
                <div class="card-title"><h5><br>game3<br><br></h5></div>
                <p class="card-text"> category: RPG <br>sample &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>device: Nintendo Switch<br>all ages</p>
            </div>
            <div id="btn_group">
                <button id="test_btn2">detail</button>
            </div>
            </div>
        </div>
        
        </div>

   </div>
</body>
javascripthtmlcsshover


Solution 1:[1]

you can use js for this

document.getElementById("img1").addEventListener('mouseover', () => {
  document.getElementById("img1").src = "./img2.gif"
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 1sina1

Related Questions