Search code examples
csshtmlfixedtransition

div overlapping fixed div - CSS opacity / transition

I've started playing around with transitions and have come up against quite a big problem. I have a set of divs that transition from 0 to 1 opacity when the user hovers over them, the problem is that when the fixed div that contains my site's navigation is on top of them they overlap it - meaning the user cant click on the navigation, as shown on the right of the image below:

enter image description here

When the transition finishes it goes back to its normal state (like on the left of that image) but as soon as the mouse moves the whole thing starts again so its impossible to click on the navigation. Is there any solution to this? Or would a jQuery alternative be the answer?

I can post the code Im using if it's of any use.

Solution

  • Set your header z-index. That should solve the problem.

    header{
z-index:999;
}