Мой div растягивается на больших экранах в Bootstrap 4 ⇐ CSS

[Anonymous]

Наложение моего изображения растягивается на большом экране. Я пробовал максимальную ширину, но не нашел решения. max-width ухудшает отзывчивость на маленьких экранах.
Я пытаюсь добавить переход к изображению, чтобы при наведении на изображение появлялось наложение, но проблема в том, что img-overlay растягивается на больших экранах.

Код: Выделить всё

.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;
}

Код: Выделить всё

[img]https://via.placeholder.com/100[/img]



Book
Product Leadership
How Top Product Managers Launch Awesome Products and Build Successful Teams.

[img]https://via.placeholder.com/100[/img]



Book
Product Leadership
How Top Product Managers Launch Awesome Products and Build Successful Teams.

Подробнее здесь: https://stackoverflow.com/questions/753 ... ootstrap-4