img : hover가 배경색과 함께 작동하지 않습니다.

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

사업부에 이미지를 넣고 사업부에 배경을 적용 해보십시오 :

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