Image with border radius and opacity on hover

Question

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.

Here the html structure

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

and the 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/

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

update: I need to crop the image

Thanks in advance.

Answer 1

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

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