My div is stretching on large screens in Bootstrap 4
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;
}
Book
Product Leadership
How Top Product Managers Launch Awesome Products and Build Successful Teams.
Book
Product Leadership
How Top Product Managers Launch Awesome Products and Build Successful Teams.