CODEWITHSUNDEEP
htmlcss
pcs
pcs

Reputation: 1854

CSS background color not working in hover state

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

Upvotes: 0

Views: 378

Answers (2)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

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/

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30607

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?

Upvotes: 0

Related Questions