The overlay on my current image is extending beyond the image's current size. I initially resized the image because it was too large for my needs, and now the overlay is not functioning correctly
HTML:
<div class="col-md-5 order-md-2 text-center">
<h2 class="title-dark">1957-1979</h2>
<div class="image-container">
<img src="../images/stanford_car.png" alt="Stanford Car" class="image-style">
<div class="overlay">
<div class="overlay-text">Stanford Car</div>
</div>
</div>
</div>
CSS:
.image-container {
overflow: hidden;
position: relative;
}
.image-style {
width: 70%;
height: auto;
border-radius: 15px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
opacity: 0;
transition: .5s ease-in-out;
background-color: rgba(0, 0, 0, 0.7);
box-sizing: border-box;
border-radius: 15px;
}
.image-container:hover .overlay {
opacity: 1;
}
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}