In my attempt to create a set of responsive cards using Bootstrap, I have written the following code for the cards:
<div class="col-xl-4 col-md-6 col-sm-6 p-2">
<div class="card shadow" style="width: 16rem;">
<div class="inner">
<img class="card-img-top" src="images/1.jpeg" alt="Card image cap">
</div>
<div class="card-body">
<h5 class="card-title">Location 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Beatae maxime eaque eligendi fugit dolores odit. Corrupti repellat aperiam.
</p>
<div class="justify-content-between">
<!-- <a href="#" class="btn btn-primary">Learn more</a> -->
<div class="ml-2">
<i class="fas fa-video fa-lg"></i>
<i class="fas fa-restroom fa-lg ml-2"></i>
<span class="ml-5">
<i class="fas fa-bolt text-warning fa-lg">10</i>
<i class="fas fa-bolt text-success fa-lg ml-2">8</i>
</span>
</div>
</div>
</div>
</div>
</div>
Along with this code, I have added some additional CSS styles:
.inner {
overflow:hidden;
}
.inner img {
transition: all 1.5s ease;
}
.inner img:hover{
transform:scale(1.5);
}
.card-img-top {
width: 100%;
height: 25vh;
object-fit: cover;
}
My goal is to make the images inside the card scale up when hovered over. This functionality works correctly, but I'm experiencing an issue where the cards stack on top of each other when I resize the window size. https://i.sstatic.net/8WPh0.png
I am struggling to figure out why this stacking behavior is occurring.