Is the image proportion relevant to the issue at hand?
<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'm trying to change img1 to a different picture (img2) when it is hovered over. I am using Django, but even after uploading the current image, the hover effect doesn't work! 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 <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 <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 <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>