img：悬停不适用于背景颜色

Question

我想将悬停效果添加到图像，但它不适用于我。当我添加不透明度为0.4的CSS样式时，它可以工作，但不适用于背景颜色。请有人帮助我吗？例如，我想要做一些小小的不透明的红色背景，以及像“+”这样的垂直和水平居中的小图标，因为它会是小的灯箱。

我有第二个问题，但它作为第一个问题并不重要。如何垂直和水平地显示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>