ホバリングでオーバーレイ画像を適用したい

Question

しかし、私は苦労しています。私はCSSのために持っている

コードは次のとおりです。だから私は思っ

 
#gallery img { 
width:700px; 
height:213px; 
margin:0; 
padding:0; 
} 

...

 
#gallery img:hover { 
    width:700px; 
    height:213px; 
    position: relative; 
    z-index:10000; 
    background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center; 
} 

は動作しますが、それはdoesntの。

私は透過的にホバーに重ね合わせていた画像は、次のとおりです。

私が間違って何をやっています。 どこかに壊れたCSSタグがあるかもしれないと思います。

助けてください。

Answer 1

修正済み。 CSS：

 
#container { position:relative; width:700px; height:213px;} 
    .image { position:absolute; width:700px; height:213px; z-index:0;} 
    .overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;} 
    .overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;} 

HTML：

<div class="overlay" ></div> 
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div> 

Answer 2

#galleryにイメージタグを置くのではなく、背景イメージがあるようにしてください。それ以外の場合はバックグラウンドの上に表示されます。次に、:hover疑似クラスを持つ別のdivを内部に作成します。それでも問題が解決しない場合は、transparentという単語を取り出してください。

イメージをオーバーレイできず、結合されたイメージの元のイメージを入れ替えることはできませんでしたか？

Answer 3

こんにちはそこに 私はあなたがCSSのメカニックを誤解していると思います： 画像そのものはオブジェクトであり、指定された背景がその背後にあります。 したがって、透明でないイメージを背景にし、透明なイメージをsrcに指定する必要があります。しかし、これはあなたのニーズに合っていません。 回避策は、CSSの場合は面倒なので、私はCSSのホバーやjavascript onMouseoverまたはjQueryで全体の画像を交換することをお勧めします - それは適切な方法ですので、それらとfamilliarを取得します。