I'm attempting to create a zoom effect on the background image only. The code snippet below shows a clickable element with an image background. However, when I apply the zoom effect, it also zooms in on the text within the div. Is there a way to isolate the zoom effect to just the background image?
<a class="outer-tile tile-text" href="#">
<div class="inner-tile d-flex flex-column align-items-start" style="background-image: url('https://picsum.photos/200/300')">
<div class="mb-auto p-2">
<span class="b-dark p-1">MyTag</span>
</div>
<div class="b-dark w-100 p-2">
<h3>My Title</h3>
<p>This is the content</p>
</div>
</div>
</a>
.outer-tile {
overflow: hidden;
height: 400px;
}
.inner-tile {
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
transition: all 0.5s ease;
}
.inner-tile:hover {
transform: scale(1.2);
}
Check out this codepen for reference.
Any suggestions on how to achieve the desired background zoom effect without affecting the text content?