#gallery {
padding: 2rem 7%;
}
#gallery .row {
display: flex;
align-items: center;
justify-content: center;
}
#gallery .row .col-md-3 {
position: relative;
overflow: hidden;
}
#gallery .row .col-md-3 img {
height: 100%;
width: 100%;
object-fit: cover;
}
#gallery .row .content {
position: absolute;
background: greenyellow;
padding: 3rem 2rem;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: translateY(100%);
}
#gallery .row .col-md-3:hover img {
transform: translateY(-100%);
}
#gallery .row .col-md-3:hover .content {
transform: translateY(0);
}
.gallery-btn {
border: 1px solid rgb(94, 21, 21);
background-color: transparent;
color: rgb(163, 27, 27);
font-size: 18px;
padding: 9px 26px;
}<section class="gallery mb-4" id="gallery">
<div class="row text-center mt-4">
<h3>Our Gallery</h3>
</div>
<div class="row text-center mt-4">
<div class="col-md-3">
<img src="images/g-img-1.jpg" alt="" />
<div class="content">
<h5>Morning Coffee</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
</p>
<button type="button" class="btn gallery-btn rounded-0 mt-2">
Read More
</button>
</div>
</div>
<div class="col-md-3">
<img src="images/g-img-3.jpg" alt="" />
<div class="content">
<h5>Morning Coffee</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
</p>
<button type="button" class="btn gallery-btn rounded-0 mt-2">
Read More
</button>
</div>
</div>
<div class="col-md-3">
<img src="images/g-img-3.jpg" alt="" />
<div class="content">
<h5>Morning Coffee</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
</p>
<button type="button" class="btn gallery-btn rounded-0 mt-2">
Read More
</button>
</div>
</div>
</div>
<div class="row text-center mt-4">
<div class="col-md-3">
<img src="images/g-img-4.jpg" alt="" />
<div class="content">
<h5>Morning Coffee</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
</p>
<button type="button" class="btn gallery-btn rounded-0 mt-2">
Read More
</button>
</div>
</div>
<div class="col-md-3">
<img src="images/g-img-5.jpg" alt="" />
<div class="content">
<h5>Morning Coffee</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
</p>
<button type="button" class="btn gallery-btn rounded-0 mt-2">
Read More
</button>
</div>
</div>
<div class="col-md-3">
<img src="images/g-img-6.jpg" alt="" />
<div class="content">
<h5>Morning Coffee</h5>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, voluptatem?
</p>
<button type="button" class="btn gallery-btn rounded-0 mt-2">
Read More
</button>
</div>
</div>
</div>
</section>I've noticed a discrepancy in the image dimensions when I hover over them.
After inspecting, it seems there might be a width disparity causing this issue.
Could it be related to my use of Bootstrap 5?
Your assistance is greatly appreciated. Thank you!