Having issue with css hover effect

Question

Please take a look at this link. Hover cursor on any movie thumbnail. Have you noticed that, all li elements moving down? How can I fix that problem?

Also, click on any thumbnail, player div will slide down. there is no box shadow under #player_container even if I set it in css files

#player_container{
    display:none;
    height:510px;    
    width: 100%;
    background-image: url(images/bg/bg_tile.jpg);
    margin-top: -510px;
    padding-top: 20px;
        -moz-box-shadow: 0px 10px 5px #888;
    -webkit-box-shadow: 0px 10px 5px #888;
    box-shadow: 0px 10px 5px #888;
}

@ptriek there is no box shadow under #player_container even if I set it in css files tried to change z-index, no success — Tural Ali
– Tural Ali, Commented Dec 17, 2011 at 0:42

Dominic Green · Accepted Answer · 2011-12-17 00:49:30Z

3

On video add a transparent border seems to fix it

.video {
    border: 1px solid transparent;
    float: left;
    font-size: 11px;
    height: 150px;
    margin: 0 25px 25px 0;
    width: 228px;
}

There is a couple off different way to fix the next part off your question. One quick way is too add another container like

<div style="display: block;" class="gradient sh" id="player_container">

    <div class="jquery-youtube-tubeplayer" id="player">

    <div id="tubeplayer-player-container1324082555277"><iframe width="853" height="480" frameborder="0" src="http://www.youtube.com/embed/LxBGDijiii0?autoplay=1&amp;autohide=1&amp;controls=1&amp;rel=0&amp;fs=1&amp;wmode=transparent&amp;showinfo=0&amp;modestbranding=0&amp;start=0&amp;theme=dark&amp;color=red&amp;enablejsapi=1&amp;origin=http://tural.us" title="YouTube video player" allowfullscreen=""></iframe></div></div>.
    <div class="bottomSpan"></div>    
</div>

and put your box shadow on this

.bottomSpan {
    box-shadow: 0 10px 5px #888888;
    display: block;
    height: 17px;
    position: absolute;
    width: 100%;
}

edited Dec 17, 2011 at 0:49

answered Dec 17, 2011 at 0:23

Dominic Green

10.3k4 gold badges32 silver badges36 bronze badges

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

3 Comments

Tural Ali Over a year ago

fixed, 1 of porblems, please take a look at second probem. Updated question

Dominic Green Over a year ago

this is happening because your container videowall is overlapping it, the shaddow is there

Dominic Green Over a year ago

modified my response with a quick solution to your second part

Jonathan · Accepted Answer · 2011-12-17 00:27:10Z

1

For me changing the margin on the corresponding < li > would make more sense.

answered Dec 17, 2011 at 0:27

Jonathan

3,0093 gold badges28 silver badges36 bronze badges

Comments

Ibu · Accepted Answer · 2011-12-17 00:54:59Z

1

That is because on hover you are adding a border which makes the container 2px bigger

the solution to give the initial class a border

.video {
    border: 1px solid #fff
    float: left;
    font-size: 11px;
    height: 150px;
    margin: 0 25px 25px 0;
    width: 228px;
}

Second Problem:

To make z-index work you need to give it a position:relative property

#player_container {
   display: none;
   height: 510px;
   width: 100%;
   background-image: url(images/bg/bg_tile.jpg);
   padding-top: 20px;
   -moz-box-shadow: 0px 10px 5px #888;
   -webkit-box-shadow: 0px 10px 5px #888;
   box-shadow: 0px 10px 5px #888;
   z-index: 2;
   position: relative;
}

edited Dec 17, 2011 at 0:54

answered Dec 17, 2011 at 0:24

Ibu

44k14 gold badges82 silver badges109 bronze badges

2 Comments

Tural Ali Over a year ago

there is no box shadow under #player_container even if I set it in css files tried to change z-index, no success

Ibu Over a year ago

@TuralTeyyuboglu See my solution to the second problem

Pointy · Accepted Answer · 2011-12-17 00:55:29Z

1

You're adding a border when the mouse hovers but not reducing the size of the element. The "height" and "width" of an element, in the W3C box model, describe the size of the contents of a block element. The padding and the border are added to that.

Some browsers allow you to switch back to the "border-box" box sizing model:

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

However Internet Explorer wont, I don't think, understand that. Maybe IE9 or 10 would understand:

  -ms-box-sizing: border-box;

(You'd put that on the ".video" style.)

edit — as to the problem with the shadow on the player: there's no shadow because there's no room for a shadow. If you make the player box "position: absolute", and correspondingly adjust the content somehow (maybe give the "wrapper" div a big top padding the same as the player size) then you'll see a shadow.

You really should be using something like Firebug to play with the CSS interactively.

edited Dec 17, 2011 at 0:55

answered Dec 17, 2011 at 0:25

Pointy

415k62 gold badges600 silver badges631 bronze badges

5 Comments

thirtydot Over a year ago

IE8 and greater support plain box-sizing: border-box.

Tural Ali Over a year ago

there is no box shadow under #player_container even if I set it in css files tried to change z-index, no success

Pointy Over a year ago

@TuralTeyyuboglu uhh ... this doesn't have anything to do with the box shadow.

Tural Ali Over a year ago

Where did I say that? I fixed 1 of problems, read second issue. Question is updated

Pointy Over a year ago

Oh sorry ... well you're probably better off asking a second question, as that issue is completely unrelated to the layout/hover issue.

ptriek · Accepted Answer · 2011-12-17 01:02:45Z

0

I'm afraid your mixing things up a bit:

Your background-image is set on #player-container - if you want #player-container to have a shadow, you'll need an extra containing div for this background. Right now #player-containerdoes have shadow, but since it's 100% wide, and fills the vertical space, the shadow doesn't show.
Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)
Add padding to the extra containing div, which also holds the background.
also (but not so important): #player-container has width:100% - that makes no sense - default is width:auto, so #player-container will automatically take 100% width

answered Dec 17, 2011 at 1:02

ptriek

9,2965 gold badges34 silver badges29 bronze badges

1 Comment

Tural Ali Over a year ago

"Your player is exactly 853px x 480px, so you'll have to set #player-container to exactly these dimensions (no padding, no margin, they will be added to the width/height)" I want it to fit horizontally 100%, there is another div for player inside container

Collectives™ on Stack Overflow

Having issue with css hover effect

5 Answers 5

3 Comments

Comments

2 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related