title: Fadein/out image rollover without the real text triggering it
body: <p>I am trying to create a navigation menu which has image fadein/fadeout background onmouseover rollover, but with real text on top of it.</p>
  
  <p>The trouble I have now is that the text has a higher z-index which disables and reactivates the rollover when the mouse is actually still inside the button.</p>
  
  <p><a href="https://jsfiddle.net/technov1king/1an1joxq/6/" rel="nofollow">https://jsfiddle.net/technov1king/1an1joxq/6/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="cf"&gt;
      &lt;img class="bottom" src="http://dummyimage.com/300.png/09f/fff" /&gt;
      &lt;img class="top" src="http://sciencenordic.com/sites/default/files/imagecache/300x/hopp_None_0.jpg" /&gt;
      &lt;div id="tekst"&gt;MOVE MOUSE OVER TEXT&lt;br&gt;SLOW LEFT TO RIGHT&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#cf {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }
  
  #cf img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  
  #cf img.top:hover {
    opacity:0;
  }
  
  #tekst {
      position: absolute;
      left: 35px;
      top: 111px;
      font-weight: bold;
      font-size: 18px;
      z-index: 99;
   } 
  </code></pre>
  
  <p>Please try it your self. I want the text over the image to do nothing. 
  So you move the mouse from left to right, not re-triggering the rollover, but moving over the text.</p>