Chrome hover effect sticking on rounded corners - html

Question

I have an image within a container. The container has rounded corners in order to make the child image circular.
There's a hover effect on the parent, but in Chrome (but not Firefox!) the effect remains when the cursor leaves the image.
Expected (Firefox):
Actual (Chrome):
Please see my demo code below:
.user {
display: inline-block;
width: 200px;
height: 200px;
object-fit: cover;
}
.image-container {
background: black;
overflow: hidden;
width: 200px;
height: 200px;
border-radius: 50%;
padding-left: 0%;
}
.image-container:hover {
cursor: pointer;
}
.image-container:hover .user {
opacity: 0.3;
transition: 0.5s;
}
<div class="image-container">
<img src="https://avatars.githubusercontent.com/u/16269580?v=4" class="user">
</div>
I'm looking to have the hover effect end immediately on leaving the "circle". Any help would be appreciated.

Answer 1

Try to add border-radius to image class .user too:
.user {
display: inline-block;
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
}
.image-container {
background: black;
overflow: hidden;
width: 200px;
height: 200px;
border-radius: 50%;
padding-left: 0%;
}
.image-container:hover {
cursor: pointer;
}
.image-container:hover .user {
opacity: 0.3;
transition: 0.5s;
}
<div class="image-container">
<img src="https://avatars.githubusercontent.com/u/16269580?v=4" class="user">
</div>