jquery - 图片 :hover doesn't works with background-color

Question

我想为图像添加悬停效果，但它对我不起作用。当我添加像 opacity 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 {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);}

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

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

.lightbox:target {
	outline: none;
	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>