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>