圆形div内的图像溢出了Opera和Safari中的边框

Question

我正在尝试制作带有图像链接的圆形div，图像是不透明度的一半，当它们盘旋时它们变成完全不透明（我正在使用jQuery这样做）。他们在Chrome，Firefox和IE中完全按照我的要求工作，但他们在Opera和Safari中表现得非常好笑。

这是该页面的webdevout：

http://www.webdevout.net/test?06

这是我的代码：

        <div class="cSpan">
           <h2 style="text-align: center;">Piercings</h2>
            <div class="circle">
                <a href="#"><img src="images/img03.png"></a>
            </div>
            <p> view more </p>
        </div>

和风格

    .cSpan {
        display: inline-block;
        width: 280px;
        margin: -8em 3em 0 3em; }

    .circle {
        width:260px;
        height:260px;
        border-radius:50% 50% 50% 50%;
        overflow:hidden;
        float: left;
        margin-bottom: 0.5em;
        border: 10px solid #100000; }

    .circle img {
        margin-left:-50%;
        margin-top:-50%;
        opacity: 0.5; }

我一直把头发拉过来，所以我希望我能在这里得到一些帮助，谢谢！ ：）