My div is stretching on large screens in Bootstrap 4 - html

Question

My image overlay is stretching on large screen. I have tried max-width but no solution. max-width destroys responsiveness on small screens.
I am trying to add transition on image so overlay will come when I will hover on image but issue is that img-overlay is stretched out on large 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/bootstrap#4.6.2/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>

Answer 1

Add a few extra CSS image parameters (see below).
Overlay CSS parameters are fine (but set opacity: 0).
We think that the DIV placements are out of sequence, as the text needs to be inside so it can stack (see example below).
The class col-lg-3 may (or may not) need changed after its placed inside all of that.
We used JS comments to make it a bit easier to see arrangement of closing DIV's.
Example below uses only one (col-lg-3) DIV sets with image.
.resource-img-height {
display: block;
width: 100%;
/*--height: auto;--*/
height: 400px;
object-fit: cover;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: 0.5s ease-in;
background-color: rgba(0, 0, 0, 0.8);
}
<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 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><!--// End text-->
</div><!--// End overlay-->
</div><!--// End column container and image-->