Currently, I am working on a project locally and do not plan to release it. However, I am facing an issue with making the overlay only appear on the image rather than covering the entire column. I came across some pre-built code on the w3 schools website that I hope will solve this problem. Along with HTML and CSS, I am also using Bootstrap v5.0
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container:hover .overlay {
opacity: 0.65;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
} <div class="col-12 col-md-6 mb-4 col-lg-2 personal-grid">
<div class="card ms-4 me-4 shadow-sm card">
<a class="image" href="#"><img class="bd-placeholder-img card-img-top d-sm-block d-md-block d-lg-none cardsize" src="images/blackopsm.jpg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"></img></a>
<a class="" href="#"><img class="bd-placeholder-img card-img-top d-sm-none d-md-none d-lg-block hidecard" style="width: 100%; height: 100%;" src="images/call-of-duty-black-ops-steam.jpg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"></img></a>
<div class="d-flex justify-content-between align-items-center">
</div>
</div>
</div>
<div class="overlay">
<div class="text">Call of Duty: Black Ops</div>
</div>
</div>