I have a card component that includes an image with some text below. When the user hovers on any part of the card, the image grows by 5% (transform: scale(1.05)
) – this behaviour works as expected.
But I cannot figure out why, when hovering on the card, why the border-radius on the image is then removed (most noticeable at the top). As the image should never grow outside of its container, the border should not change on hover.
.card-container {
display: flex;
flex-direction: column;
height: 400px;
width: 250px;
}
.img-wrapper {
flex-grow: 1;
position: relative;
overflow: hidden;
}
.img-wrapper img {
border: 1px solid black;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.75rem;
}
.card-container:hover .img-wrapper img {
transform: scale(1.05);
}
.text-wrapper {
border: 2px solid green;
}
<div class="card-container">
<div class="img-wrapper">
<img src="https://placekitten.com/1440/671" />
</div>
<div class="text-wrapper">
hello
</div>
</div>
Can anyone suggest where I am going wrong?
2
Answers
You just need to remove
border-radius
from.img-wrapper img
and add it to.img-wrapper
that’s because you are giving border-radius to an image that is being zoomed in hover
You just need to give the border-radius to the parent element of the image, not to the image.