CSS3 Zoom animation with border-radius - css

Question

I need a way to make a zoom animation with CSS3 in a div with border-radius. But as you can see below, it doesn't work well:
Working Code: https://jsfiddle.net/n5owxmch/
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
border-radius: 10px;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 21s;
-webkit-transition: all 21s;
transition: all 21s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
HTML:
<div class="item">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
Is there a way to fix that ?

Answer 1

From my research I reproduced this just in Chrome (Edge and Firefox works fine). To solve it I added z-index and vendor prefixes for border-radius see below .
Prioritize the .item by adding z-index: 100; and deprioritize the image with z-index: 0;. Basically this will enforce the image to be under the .item.
And I added vendor-prefixes (-moz- and -webkit-) for border-radius:
-moz-border-radius:10px; /* add this */
-webkit-border-radius: 10px; /* add this */
See snippet:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
z-index: 100; /* add this */
position: relative;
-moz-border-radius:10px; /* add this */
-webkit-border-radius: 10px; /* add this */
border-radius: 10px;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
z-index: 0; /* add this */
-moz-transition: all 2s;
-webkit-transition: all 2s;
transition: all 2s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="item">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>