CSS background color not working in hover state

Question

When I hover over the image the play button shows and the background-color and opacity of .youTubeVideo changes.

However, this does not happen when you hover over just the play button. How can I make the background-color and opacity of .youTubeVideo change when hovering over the play button?

.youTubeVideo:hover {
  opacity: 0.5;
  background-color: green;
}
.videoThum:hover {
  background-color: green;
  background-image: url("http://s24.postimg.org/k69rptjk1/play_button.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<div class="col-3">
  <div class="videoThum">
    <a href="javascript:;" rel="https://www.youtube.com/embed/OSgvYZpO2xY" class="youTubeVideo">
      <img src="http://s8.postimg.org/jf407d2xh/saina_nehwal_syed.png" />
    </a>
  </div>
  <div class="caption"><a href="#"><h2>2015 Syed Modi International</h2></a>
    <a href="#">
      <p>2015 Syed Modi International India Masters SF [WS]</p>
    </a>
  </div>
</div>

DEMO

may be your image coverd teh entire background. That's why you can't able to see the background color. looks your `background-size:100% 100%` covers the entire area. — Suresh Ponnukalai, May 20 '15 at 08:53
@SureshPonnukalai: is there any relation between background color and background-size?.. thanks — pcs, May 20 '15 at 08:55
@saina use some transparent background image, then you will come to know. — Suresh Ponnukalai, May 20 '15 at 08:56
@SureshPonnukalai: here is the link http://jsfiddle.net/eyz3gsuj/4/ .. so why didn't show play button as green color, thanks — pcs, May 20 '15 at 09:05
background color is displaying but hide backside of image. check http://i.stack.imgur.com/fn32q.png — ketan, May 20 '15 at 09:06

score 1 · Answer 1 · answered May 20 '15 at 09:01

The issue is that when you hover over the right side of .videoThum you are no longer hovering over .youTubeVideo so .youTubeVideo:hover wont take effect.

As .videoThum contains .youTubeVideo you can trigger the change to .youTubeVideo when .videoThum is hovered instead by changing .youTubeVideo:hover to .videoThum:hover .youTubeVideo.

.videoThum:hover {
  background-color: green;
  background-image: url("http://s24.postimg.org/k69rptjk1/play_button.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.videoThum:hover .youTubeVideo {
  opacity: 0.5;
  background-color: green;
}

<div class="col-3">
  <div class="videoThum">
    <a href="javascript:;" rel="https://www.youtube.com/embed/OSgvYZpO2xY" class="youTubeVideo">
      <img src="http://s8.postimg.org/jf407d2xh/saina_nehwal_syed.png" />
    </a>
  </div>
  <div class="caption"><a href="#"><h2>2015 Syed Modi International</h2></a>
    <a href="#">
      <p>2015 Syed Modi International India Masters SF [WS]</p>
    </a>
  </div>
</div>

JS Fiddle: http://jsfiddle.net/bq9rgzap/

@saina In that case please check my edit to your question as it may not be exactly what you are after. You may want to roll it back or edit it with extra information. Please could you clarify exactly what it is about my answer that isn't fulfilling your criteria? — Hidden Hobbes, May 20 '15 at 09:24

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

Your background image is covering the whole element.

See this modified fiddle with background-size changed to see the problem.

One way around this would be to use a png image with transparency or pseudo elements with position:absolute

See CSS: set background image with opacity?

edited May 23 '17 at 11:58

Community

1
1

answered May 20 '15 at 08:57

AmmarCSE

30,079
5
45
53

CSS background color not working in hover state

2 Answers2