Issues In Image Opacity In Hover State

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

Copy

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

  </div>
</div>

Solution 2:

Check this:

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