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
– Suresh Ponnukalai, Commented May 20, 2015 at 8:53
@SureshPonnukalai: is there any relation between background color and background-size?.. thanks — pcs
– pcs, Commented May 20, 2015 at 8:55

Hidden Hobbes · Accepted Answer · 2015-05-20 09:01:02Z

1

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/

answered May 20, 2015 at 9:01

Hidden Hobbes

14.2k3 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hidden Hobbes Over a year ago

@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?

Community · Accepted Answer · 2017-05-23 11:58:33Z

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, 2017 at 11:58

CommunityBot

11 silver badge

answered May 20, 2015 at 8:57

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

Collectives™ on Stack Overflow

CSS background color not working in hover state

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related