css遷移不透明フェードバックグラウンド

Question

ユーザーが画像をホバリングしているときに、透明な白にフェードする遷移を行っています。私の "問題"は、色が黒くなる色を変える必要があるということです。私はちょうど背景を追加しようとしました：黒;トランジションを含むクラスには、しかし、それはあまりにもうまくいきません、それは白い透明にまだ退色しています。

私が使用していますCSSのコードは次のとおりです。

.item-food:hover{ 
    opacity:0.2; 
} 

.item-fade{ 
    background:black; 
    opacity: 0.8; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

See small js fiddle here

Answer 1

それは "黒透明" に退色や "白透明" ではないですbackground: black;

.imgHolder{ 
 
    display: inline-block; 
 
    background: #000; 
 
} 
 
.item-fade{ 
 
    vertical-align: top; 
 
    opacity: 1; 
 
    transition: opacity 0.3s; 
 
    -webkit-transition: opacity 0.3s; 
 
} 
 
.item-fade:hover{ 
 
    opacity: 0.2; 
 
}

<span class="imgHolder"> 
 
    <img class="item-fade" src="http://placehold.it/100x100/cf5" /> 
 
</span>

Answer 2

問題がwhite色ではありませんのでご注意ください。透明であるからです。

要素が透明になると、その要素のすべての不透明度が返されます。 IE 6 7などのアルファフィルタは、新しい値に変更されます。

あなたはそれが白であると言うことはできません！

要素の透明度を1に変更し、画像の透明度を.2に変更したり、これまでに何をしたいのかを変更することができます。

Answer 3

を持ってSPAN要素にあなたのイメージを包みます。それは画像の背景にある色が何であっても表示しているだけです。ではなく画像の背景色です。その色は画像によって完全に隠されています。

黒にフェードしたい場合（ish）、画像の周りに黒いコンテナが必要です。以下のような何か：

.ctr { 
    margin: 0; 
    padding: 0; 
    background-color: black; 
    display: inline-block; 
} 

と

<div class="ctr"><img ... /></div> 

Answer 4

http://jsfiddle.net/6xJQq/13/

.container{ 
    display:inline-block; 
    padding:5px;/*included padding to see background when img apacity is 100%*/ 
    background-color:black; 
    opacity: 1; 
} 

.container:hover{ 
    background-color:red; 
} 
img{ 
    opacity: 1; 
} 
img:hover{ 
    opacity: 0.7; 
} 

.transition{ 
    transition: all .25s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -webkit-transition: all .25s 

}