overflow - サークル 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; }

私はこれについて頭を悩ませてきたので、ここで助けてもらえることを願っています、ありがとう! :)