Issues in image opacity in hover state

Question

Here is my html and css code for hover state.

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

Here is my jsfiddle: http://jsfiddle.net/7sbw18j0/

When i hover an image, it doesn't show like pink color with opacity.

Can anyone help me? Thanks in advance.

possible duplicate of [How to set background color with opacity and background image in hover state?](http://stackoverflow.com/questions/28169488/how-to-set-background-color-with-opacity-and-background-image-in-hover-state) — emerson.marini, Jan 27 '15 at 11:37

score 2 · Answer 1 · answered Jan 27 '15 at 05:05

2

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>

answered Jan 27 '15 at 05:05

Vitorino fernandes

15,794
3
20
39

your answer like this http://s17.postimg.org/q0z3ehtin/Untitled_1.png.. what is this pink color line? – selva Jan 27 '15 at 05:19
try settting `div.col-3 ` to `display:inline-block` @selva – Vitorino fernandes Jan 27 '15 at 05:37

score 0 · Accepted Answer · answered Jan 27 '15 at 05:14

0

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

answered Jan 27 '15 at 05:14

Aru

1,840
1
12
15

somewhat okay @aru. but.. at the bottom of image, it shows pink color border right? How to remove that? – selva Jan 27 '15 at 05:22
@selva, sorry for the delay. just add 'vertical-align:middle' to the class '.popular:hover img{vertical-align:middle;}' to get it fixed!! Check the updated demo - http://jsfiddle.net/7sbw18j0/5/ – Aru Jan 27 '15 at 06:24
may i know, why we are using vertical-align:middle? – selva Jan 27 '15 at 08:02
hope this helps you... http://stackoverflow.com/questions/7774814/remove-white-space-below-image and http://www.tutorialrepublic.com/faq/how-to-remove-white-space-under-an-image-using-css.php – Aru Jan 27 '15 at 08:24

Issues in image opacity in hover state

2 Answers2

Linked