-2

I have been created popup playing youtube videos using jquery.

Html:

<div class="wrap">
    <div class="col-3">
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="img/play-1.jpg"/></a></div>
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="img/play-1.jpg"/></a></div>
               <div class="videoThum"> <a href="javascript:;"  rel="http://www.youtube.com/embed/GNb8T5NBdQg?list=PL6B08BAA57B5C7810" class="youTubeVideo" ><img src="img/play-1.jpg"/></a></div>
            </div>
</div>

Here is my jsfiddle: http://jsfiddle.net/h5x0c0qr/

When i hover that image, it shows play-icon and background-color with opacity right?

I need to show, when in hover state, need to show background color: pink with opacity and also with play icon.

I can't able to set background color. Can anyone help me?

Thanks in advance.

selva
  • 1
  • 5
  • 1
    Possible duplicate of: [Issues in image opacity in hover state](http://stackoverflow.com/questions/28163558/issues-in-image-opacity-in-hover-state) – emerson.marini Jan 27 '15 at 11:38
  • Stop re-posting the same question over and over again. – emerson.marini Jan 27 '15 at 11:38
  • super.. but i just i confused.. I thought, add background color in hover state.. but you did .videoThum { background-color:rgb(240, 14, 238); display: inline-block; }.. i thought .videoThum:hover... can you please explain me? – selva Jan 27 '15 at 11:39
  • possible duplicate of [CSS: set background image with opacity?](http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity) – Atur Jan 27 '15 at 11:45

3 Answers3

0

Why not just add the background-color attribute?

.videoThum:hover {
    background-image: url('http://www.californiagrinders.com/images/playbutton.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: pink; /* Hello Mr. Pink */
}
0

The reason why you can't add the background color is because of the code here: 

.overlaybg {
background: #000;
display: none;
height: 100%;
opacity: 0.7;
position: fixed;
width: 100%;
z-index: 6;
}

You have the display on "NONE" and because it is the parent of the div's you're trying to re-code,,, the effect is not showing up.

I suggest you take out "display: none;"

Cheers

Alex
  • 357
  • 1
  • 12
0

see the js fiddle :http://jsfiddle.net/h5x0c0qr/2/

and add this css:

.videoThum:hover {
    background-color: pink;
    background-image: url("http://www.californiagrinders.com/images/playbutton.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 209px;
    opacity: 0.9;
    width: 252px;
    z-index: 5;
}
anji
  • 344
  • 3
  • 6