JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img-wrapper">
    <img src="http://ts2.mm.bing.net/th?id=HN.608017620862175177&pid=15.1&H=160%20&W=80" />
</div>


<ul>
<li>Hover on the image.
<li>During transition, round corners disappear.
<li>After transition complete, round corners restore.
<li>How to retain round corners during transition?
</ul>

    <p style="color:silver; font-size:12px;">Forked from http://jsfiddle.net/hashem/7vY7v/4/
    </p>

CSS

body {
    padding: 20px;
}

.img-wrapper {
    display: inline-block;
    overflow: hidden;
    border: 1px solid blue;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.img-wrapper img {
    -webkit-transition: transform .5s ease;
    -moz-transition: transform .5s ease;
    -ms-transition: transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;

    transform: scale(1);
}

.img-wrapper img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
    transform:scale(1.5);
}