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

I'm working on a jquery plugin. I need to make mask effect over an image. Everything goes fine on FF but in Chrome and Opera doesnt work.

我正在研究一个jquery插件。我需要在图像上制作蒙版效果。 FF上的一切都很顺利，但Chrome和Opera无法正常工作。

Here the html structure

这里是html结构

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

and the css

和css

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

He're is the jsfiddle http://jsfiddle.net/geedmo/qQUfA/

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

Chrome looks fine until hover, but Opera works really bad. Is anyway to achieve the mask effect without changing the html structure?

Chrome看起来很好，直到悬停，但Opera工作非常糟糕。无论如何都要在不改变html结构的情况下实现蒙版效果？

update: I need to crop the image

更新：我需要裁剪图像

Thanks in advance.

提前致谢。

1 个解决方案

#1

Seems to work fine: http://jsfiddle.net/qQUfA/4/ I had to add height and width for the image:

似乎工作正常：http：//jsfiddle.net/qQUfA/4/我不得不为图像添加高度和宽度：

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