img：ホバーは背景色では動作しません

Question

画像にホバー効果を追加したいのですが、私にとっては効果がありません。不透明度0.4のようなCSSスタイルを追加したとき、それは動作しますが、背景色では動作しません。誰かが私を助けてくれますか？私は小さい不透明度の赤い背景や、小さなライトボックスになるので、縦と横を中心とした小さなアイコンで "+"したいと思います。

私は2番目の質問がありますが、最初の質問としては重要ではありません。クリックで縦横にimgを表示する方法。私はあらゆる種類の助けに感謝します！ここで

コードです：

HTML & CSS：

html,body { 
 
    font-family: 'Raleway', sans-serif; 
 
    padding: 0 2em; 
 
    font-size: 18px; 
 
    background: #222; 
 
    color: #aaa; 
 
    text-align:center;} 
 

 
h1 { 
 
    font-size: 3em; 
 
    font-weight: 200; 
 
    margin: 0.5em 0 0.2em 0;} 
 

 
p { 
 
    margin: 1.5em 0; 
 
    color: #888;} 
 

 
.italic { font-style: italic; } 
 
.small { font-size: 0.8em; } 
 

 
.lightbox { 
 
\t display: none; 
 
\t position: fixed; 
 
\t z-index: 999; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t text-align: center; 
 
\t top: 0; 
 
\t left: 0; 
 
\t background: rgba(0,0,0,0.8);} 
 

 
.lightbox img { 
 
\t max-width: 90%; 
 
\t max-height: 80%; 
 
\t margin-top: 2%; 
 
    display: inline-block;} 
 

 
.normal-img img:hover{ 
 
    opacity:0.6; 
 
    background: red;} 
 

 
.lightbox:target { 
 
\t outline: none; 
 
\t display: block;}

<h1>CSS Lightbox</h1> 
 
<p>Click the thumbnail below to activate the lightbox</p> 
 
<a href="#img1" class="normal-img"> 
 
    <img src="http://placehold.it/350x150"> 
 
</a> 
 
<a href="#_" class="lightbox" id="img1"> 
 
    <img src="http://placehold.it/350x150"> 
 
</a>

Answer 1

のdivの中に画像を入れてのdivに背景を適用してみてください。

#container { 
 
    background: red; 
 
    height: 150px; 
 
    width: 350px; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0;left: 0;right: 0;bottom: 0; 
 
} 
 
#container img:hover { 
 
    opacity: 0.6 
 
}

<div id="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>