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

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

Html:

这是我的JSFIDLE：

当我悬停在一个图像上时，它不会像粉红色那样显示，并且不透明度高

有人能帮我吗？提前谢谢。

div.col-3{
-webkit列数：3；
-webkit柱间隙：10px；
-moz列数：3；
-moz柱间距：10px；
列数：3；
柱间距：10px；
利润率：20px 30px；
}
.受欢迎{
背景色：#FF1493；/*为父图像添加了背景，以便悬停时背景可见*/
}
.流行的img{
垂直对齐：中间；/*添加以删除下面的额外空间*/
}
.流行图片：悬停{
不透明度：0.7；/*悬停时减少图像不透明度*/
}

检查以下内容：

HTML

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

---

你的回答是这样的。。这条粉色线是什么？请尝试设置

div.col-3

以

显示：内联块

@selvasomewhat ok@aru。但是在图像的底部，它显示粉红色边框，对吗？如何移除它？@selva，抱歉耽搁了。只需将“垂直对齐：中间”添加到类中。流行：悬停img{vertical align:middle；}即可将其修复！！检查更新的演示-我可以知道，为什么我们使用垂直对齐：中间？希望这能帮助你。。。和可能的副本

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;
}

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

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;
}