帶有邊框半徑和不透明度的懸停圖像

Question

我正在研究jquery插件。我需要對圖像進行遮罩效果。在FF上一切都很順利，但在Chrome和Opera中無法正常工作。

這裏的HTML結構

<div id="container"> 
    <img src="http://lorempixel.com/300/200" /> 
</div> 

和CSS

#container, #container img { border-radius: 150em;} 
#container img:hover {opacity: 0.5; } 
#container { 
    overflow: hidden; 
    background: #000; 
    width: 200px; 
    height: 200px; 
} 

He're是的jsfiddle http://jsfiddle.net/geedmo/qQUfA/

Chrome會罰款，直至徘徊，但歌劇作品真的不錯。 無論如何要在不改變html結構的情況下實現蒙版效果？

更新：我需要裁剪圖像

在此先感謝。

Answer 1

似乎很好地工作：http://jsfiddle.net/qQUfA/4/我不得不添加的高度和寬度圖像：

#container img { 
    width: 100%; 
    height: 100%; 
}