悬停时 CSS 边框半径变化

Question

我不明白为什么悬停在这个 div 上时 CSS border-radius 会发生变化:http://jsfiddle.net/7pujbpn0/

img {
    max-width: 100%;
    display: block;
}

.thumbnail {
	position: absolute;
    top: 50%;
    left: 50%;
    
    width: 320px;
    height: 240px;
    
    -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
    -moz-transform: translate(-50%,-50%); /* Firefox */
    -ms-transform: translate(-50%,-50%); /* IE 9 */
    -o-transform: translate(-50%,-50%); /* Opera */
    transform: translate(-50%,-50%);
     border-radius: 13px;
}

.image {
    width: 100%;
    height: 100%;    
    overflow: hidden;
    border-radius: 13px;
}

.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
  	-moz-transition: all 1s ease; /* Firefox */
  	-o-transition: all 1s ease; /* IE 9 */
  	-ms-transition: all 1s ease; /* Opera */
  	transition: all 1s ease;
}

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

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
    </div>
</div>

border-radius 设置为 13px。当您将鼠标悬停在 div 上时，我只是想在图像上实现简单的缩放效果。

Answer 1

如果你添加:

    .thumbnail {overflow: hidden;}

它应该可以解决问题。

这是更新后的 jsfiddle 的链接:

http://jsfiddle.net/7pujbpn0/2/