Css Image Hover inside Border-Radius
Sadly it's a bug on chrome Version 27.0.1453.116 m .Which is describe it here bug 62363
It occurs when you use overflow:hidden in mix with transform: scale(1.45)
A workaround, that works well in the design aspect is just remove the overflow:hidden on the div.rounded-smallborder section . (just an option to workaround the issue). You can take a look at the preview here. fiddle example
Hope it helps.
I edited your code see results here
it chrome BUG with scale and overflow .
for the container that have the ( overflow:hidden )add ( in your case its the div.rounded-smallborder section )
position:relative;z-index:1;
seems to be an engine bug.Adding border-radius also to the image tag should solve the problem.
div.rounded-smallborder section img{ position: absolute; border-radius: 100%; /*added line*/ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; left: 0%; }