javascript - 悬停时具有边框半径和不透明度的图像

Question

我正在开发一个 jquery 插件。我需要在图像上制作 mask 效果。在 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;
}

他是 jsfiddle http://jsfiddle.net/geedmo/qQUfA/

Chrome 在悬停之前看起来不错，但 Opera 的效果很差。有没有办法在不改变html结构的情况下实现 mask 效果？

更新:我需要裁剪图像

提前致谢。

Answer 1

似乎工作正常:http://jsfiddle.net/qQUfA/4/我必须为图像添加高度和宽度:

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