Is there a way to make an image still zoom in on hover even when it has an overlay using CSS?
I am currently working with Bootstrap 5.2
Thank you in advance.
.trip-card {
position: relative;
}
.trip-card img {
border-radius: 30px;
}
.overlay {
position: absolute;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(66, 66, 66, 0.525);
}
/*zoom does not work when there is overlay*/
.zoom-effect-1 {
overflow: hidden;
}
.zoom-effect-1 img {
border-radius: 30px;
transform: scale(1);
-webkit-transform: scale(1);
}
.zoom-effect-1:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
}
.effect-image-1 {
border-radius: 30px;
position: relative;
display: block;
}
.zoom-effect-1 img {
transition: all .4s linear;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
}<body>
<div class="trip-card p-4 col-12 col-md-6 col-lg-4 col-xl-3 ">
<div class="effect-image-1 zoom-effect-1">
<img src="https://picsum.photos/200" class="w-100" />
</div>
<div class="overlay text-white d-flex justify-content-center align-items-center m-4">
<div>
<h3 class="text-center">Trip Name</h3>
<p>2 Oct 2022 - 22 Oct 2022</p>
</div>
</div>
</div>
</body>