Issues In Image Opacity In Hover State

Here is my html and css code for hover state. Html:

Copy

<divclass="col-3"><divclass="popular"><ahref="#"><imgsrc="http://s10.postimg.org/4zqkz9rxl/saina_2.png" /></a></div></div>

Solution 2:

Check this:

HTML

<divclass="col-3"><divclass="popular"><ahref="#"><imgsrc="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:20px30px;
}
.popular {
    overflow:hidden;
}
.popular:hover {
    background:#FF1493;
}
.popular:hoverimg {
    opacity:0.7;
}

Fiddle Demo