変化画像の不透明度と

Question

私は、画像のフレームスタイルを持って、その上にマウスオーバーでリンクの背景を追加します。

.frame { 
    background:#efefef; 
    border:1px solid #f6f6f6; 
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); /* @todo Old Browsers Fix */ 
    margin-bottom:15px; 
    padding:4px; 
} 

私は仕事のプロジェクトの一つの場所では、私は次のようしているHTMLコード：

<a href="#" class="preview"> 
    <img class="frame" src="http://placehold.it/288x159" alt="" /> 
</a> 

基本的には、マウスオーバー時にファイルの不透明度を変更し、リンクに背景（プレビューアイコン）を追加します。 - どのように私は画像本体の背景を表示することができます（現在、それはまた、国境上に表示されています） ：私はいくつかの問題に直面していましたが

.preview img.frame { 
    margin:0; 
    position:relative; 
} 
.preview:hover { 
    background:url('../img/icon_zoom.png') center center no-repeat; 
    display:inline-block; 
    z-index:40; 
} 
.preview img { /* @todo Add different browsers rules */ 
    opacity: 1; 
    /*moz-transition-property:opacity; 
    -moz-transition-timing-function:ease-out; 
    -moz-transition-duration:500ms;*/ 
    -moz-transition:opacity 1s ease-in-out; 
} 
.preview:hover img { 
    opacity:.5; 
    -moz-transition:opacity 1s ease-in-out; 
    /*-moz-transition-property:opacity; 
    -moz-transition-duration:500ms; 
    -moz-transition-timing-function:ease-out;*/ 
    display:block; 
    position:relative; 
    z-index:-1; 
} 

：私は、コードを次がありますか？ - Chromeで不透明度が変更されていない理由

jsFiddleが追加されました。ご覧のとおり、FFでは動作しますが、Chromeでは動作しません。

Answer 1

問題は、displayをinline-blockに変更しているようです。それを取り出して、同じ機能を持ち、うまく動作するはずです。

いくつか変更すると、意図したとおりに動作するように見えます。 http://jsfiddle.net/minitech/v2vtw/2/