Zoom image with CSS3 with parent div have border radius overflow - html

Question

i try to use zoom image(scale CSS3) animation when mouse hover the image, but i have a problem with overflow during the animation, i want use tag <img> because i want put background color besides the image(have background transparency)
this is my problem:
HTML:
<div class="thumbnail">
<div class="divIMG">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
</div>
</div>
CSS:
.thumbnail {
margin-top: 20px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail div.divIMG {
border-radius: 50%;
border: 4px solid #08456f;
width:200px;
height:200px;
overflow:hidden;
margin: 0 auto;
}
.thumbnail img {
background-color: #c3d3de;
width: 100%;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.thumbnail div.divIMG:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
https://jsfiddle.net/j1rdv968/
anyone know a solution?
ps. sorry my english.

Answer 1

You can keep the transforming image inside of the .divIMG div by giving it a position: relative;, and a higher z-index than its child image.
CSS
.thumbnail div.divIMG {
z-index: 3;
position: relative;
}
.thumbnail img {
z-index: 2;
}
.thumbnail {
margin-top: 20px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
}
.thumbnail div.divIMG {
border-radius: 50%;
border: 4px solid #08456f;
width:200px;
height:200px;
overflow:hidden;
margin: 0 auto;
z-index: 3;
position: relative;
}
.thumbnail img {
background-color: #c3d3de;
width: 100%;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
z-index: 2;
}
.thumbnail div.divIMG:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
<div class="thumbnail">
<div class="divIMG">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/14182-200.png" alt="">
</div>
</div>
JSFiddle