When viewing my image overlay on a large screen, it appears stretched out. I have attempted using max-width to address this issue, but it compromises responsiveness on smaller screens.
I am currently working on adding a transition effect to the image so that the overlay will appear when hovering over it. However, the problem arises when the img-overlay stretches on larger screens.
.head-txt {
font-size: 50px;
color: black;
}
.resource-img-height {
height: 400px;
object-fit: cover;
}
.font-color {
color: black;
}
.font-size-resourse {
font-size: 20px;
}
.resourse-book-txt-width {
width: 250px;
}
.img-overlay {
position: absolute;
/* max-width: 97%; */
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 1;
transition: 0.5s ease-in;
background-color: rgba(0, 0, 0, 0.8);
}
.book-img-div:hover .img-overlay {
opacity: 1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414607a627a66">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="col-lg-12 mt-1" style="background-color: white;">
<div class="row">
<div class="col-lg-3 img-div-pad-right img-div-pad-left book-img-div"><img src="https://via.placeholder.com/100" class="img-fluid resource-img-height" alt="">
<div class="img-overlay vw-100"></div>
</div>
<div class="col-lg-3 my-auto">
<h5 class="font-color mt-1">Book</h5>
<h1 class="font-color mt-1">Product Leadership</h1>
<p class="font-color mt-3 resourse-book-txt-width font-size-resourse">How Top Product Managers Launch Awesome Products and Build Successful Teams.</p>
</div>
<div class="col-lg-3 img-div-pad-right img-div-pad-left book-img-div"><img src="https://via.placeholder.com/100" class="img-fluid resource-img-height" alt="">
<div class="img-overlay"></div>
</div>
<div class="col-lg-3 my-auto">
<h5 class="font-color mt-1">Book</h5>
<h1 class="font-color mt-1">Product Leadership</h1>
<p class="font-color mt-3 resourse-book-txt-width font-size-resourse">How Top Product Managers Launch Awesome Products and Build Successful Teams.</p>
</div>
</div>
</div>