html - Firefox のみの CSS マウスオーバー効果のバグ

Question

現在、私が作成した css マウスオーバー効果で問題に直面しています。

クロムを使用してこれを見ると、http://176.32.230.21/luciaphotography.co.uk/すべてが正常に機能し、マウスを画像の上に置くと、関連するカテゴリの画像がマウスオーバーされます。現在、Firefox では動作しますが、2 つの問題があることに気付いた場合:

1. 画像のサイズが適切に変更されていないため、スウォッチのテキストがぼやけて見えることがわかります。

2. (より重要) マウスオーバーすると、最初の画像がわずかに小さくなり、画像の右側にカテゴリ画像がわずかに表示されます (意味がわかります)。

何が起こっているのかよくわかりませんが、最初の問題は発生しますが、2 番目の問題は Internet Explorer では発生しません。IE10ではなくIE9を使用しているためだと思います。

Chrome と FF の最新バージョンを使用しています。

<div id="widget1" class="widget-container">         
<div class="textwidget">
    <a href="#">
        <img class="bottom" src="images/editorial.png">
        <img class="top" src="images/front1.png">
    </a>
</div>

.widget-container {
    height: 155px;
    width:155px;
    padding-right:2px;
    padding-left: 2px;
    float: left;
    position: relative;
    margin: 0 auto;
}

.widget-container img.top:hover {
    opacity: 0;
}
.widget-container img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

.bottom {
    max-width: 155px;
    max-height: 155px;
}

.top {
    max-width: 155px;
    max-height: 155px;
}