title: div overlapping fixed div - CSS opacity / transition
body: <p>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: </p>
  
  <p><img src="https://i.stack.imgur.com/nFl9E.png" alt="enter image description here"></p>
  
  <p>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? </p>
  
  <p>I can post the code Im using if it's of any use. </p>