悬停状态下的图像不透明度问题

Question

这是我的悬停状态的 html 和 css 代码。

HTML：

<div class="col-3">
               <div class="popular"> <a href="#" ><img src="http://s10.postimg.org/4zqkz9rxl/saina_2.png"/></a></div>

    </div>

css:

div.col-3 {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count:3;
    column-gap:10px;
    margin:20px 30px;
}
.popular:hover {
opacity:0.7;
background-color:#FF1493;
}

这是我的 jsfiddle：http://jsfiddle.net/7sbw18j0/

当我将图像悬停时，它不会显示为不透明的粉红色。

谁能帮助我？提前致谢。

Answer 1

div.col-3 {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  column-count: 3;
  column-gap: 10px;
  margin: 20px 30px;
}
.popular {
  background-color: #FF1493; /* added background for parent not image so that the background is visible when hovered */
}
.popular img {
  vertical-align: middle; /* added to remove extra space below */
}
.popular img:hover {
  opacity: 0.7; /* decrease image opacity on hover */
}

<div class="col-3">
  <div class="popular">
    <a href="#">
      <img src="http://s10.postimg.org/4zqkz9rxl/saina_2.png" />
    </a>

  </div>
</div>

Answer 2

检查一下：

HTML

<div class="col-3">
    <div class="popular"> <a href="#"><img src="http://s10.postimg.org/4zqkz9rxl/saina_2.png"/></a>
    </div>
</div>

CSS

div.col-3 {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count:3;
    column-gap:10px;
    margin:20px 30px;
}
.popular {
    overflow:hidden;
}
.popular:hover {
    background:#FF1493;
}
.popular:hover img {
    opacity:0.7;
}

Fiddle Demo