Why does border-radius stop working for transition time?

Question

HTML

In general, on one site , I have a block in which there is an image that occupies 100% of the block

<div>
     <img src="image.png">       
</div>

This block has border-radius:10px and overlay:hidden
Image at 100% block width
When hovering over the block, the image is enlarged by 30% through transform: scale() and a little blur is applied to it

div{
  overflow: hidden;
  border-radius: 10px;
  width: 300px;
  height: auto;
}
img{
width:100%;
border-radius: 10px;
transition: 1s all;
}
div:hover img{
-webkit-transform: scale(1.30, 1.30);
  -ms-transform: scale(1.30, 1.30);
  transform: scale(1.30, 1.30);
  -webkit-filter: blur(2px);
  filter: blur(2px);
}

So, during the transition of the image - border-radius and overfow:hidden seem to disappear
. Or rather, they are, but what goes beyond the rounded corner is displayed quite dimly.
And after the animation is over, everything looks as it should.
It looks like this:
1) There is no hover

2) Move the mouse, the animation starts, the corners appear

3) The animation ends, the corners disappear again

During the reverse animation - "angularity" also appears
Uploaded on jsfiddle

Answer 1

How to round the corners of an image when the hover zoom effect is used?
your example