How to fix overflow: hidden; during animation in Opera?

Question

css

Good day, dear ones!
I came across such a problem: when hovering, you need to animate the image in the block (so that the picture goes up).
Well, it's standard in general. BUT the problem is that the parent block has rounded corners: border-radius: 35px 0 35px 0;
Well, accordingly, so that the child image does not crawl out of bounds, this block is screwed with overflow: hidden;
Then we just write the simplest hover property, open this layout masterpiece in the Opera browser... and the magic begins =(
The image, which was decorously and nobly sitting under overflow: hidden; during animation, starts protruding from the parent element with all corners! It didn’t care about the radius and hidden. While the animation is going on, the corners stick out.
I have no idea what to do. =((
The only thing that came to mind was to set the radius of the parent to the image block with handles. But ... maybe there is a competent solution?
ps Everything works correctly in Firefox.
Code:
https://jsfiddle.net/KatSSS/6pzf77w0/

.aside_map_frame {
  height: 100%;	
  border: 4px solid #B4811C;
  border-radius: 35px 0 35px 0;
  -moz-border-radius: 35px 0 35px 0;
  -webkit-border-radius: 35px 0 35px 0;
  overflow: hidden;
  z-index: 10;
}
.aside_map_img {
  position: relative; 
  background: transparent url('http://posterok.com/photo/big/POK01492_1.jpg') no-repeat scroll center center;
  background-size: cover;
  background-color: #f5eccd;
  min-height: 100%;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
}
.aside_map_img:hover {
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  transform: translateY(-50px);
}

<div class="aside_map_frame">
    <div class="aside_map_img"></div>
</div>

Answer 1

https://jsfiddle.net/cr2d3kz0/