img: Hover funktioniert nicht mit Hintergrundfarbe

Question

Ich möchte Hover-Effekt zum Bild hinzufügen, aber es funktioniert nicht für mich. Wenn ich CSS-Stil wie Opazität 0,4 hinzugefügt habe, funktioniert es aber nicht mit Hintergrundfarbe. Könnte mir bitte jemand helfen? Ich möchte zum Beispiel roten Hintergrund mit kleiner Deckkraft und mit kleinem Icon wie "+" vertikal und horizontal zentriert machen, da es sich um einen kleinen Leuchtkasten handelt.

Ich habe zweite Frage, aber es ist nicht wichtig als erste Frage. Wie man img beim Klick vertikal und horizontal zeigt. Ich schätze jede Art von Hilfe!

Hier Code:

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

Versuchen Sie das Bild in den div setzen und den Hintergrund der div Anwendung:

#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>