CSS懸停

Question

邊界半徑的變化爲什麼這個div上懸停的CSS border-radius改變我想不通：http://jsfiddle.net/7pujbpn0/

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

 
.thumbnail { 
 
\t 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 */ 
 
    \t -moz-transition: all 1s ease; /* Firefox */ 
 
    \t -o-transition: all 1s ease; /* IE 9 */ 
 
    \t -ms-transition: all 1s ease; /* Opera */ 
 
    \t 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設置爲13像素。當您將鼠標懸停在div上時，我只是試圖在圖像上實現簡單的縮放效果。

Answer 1

如果添加：

.thumbnail {overflow: hidden;} 

它應該做的伎倆。

這裏是一個更新的jsfiddle鏈接：你的問題

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