Fadein/out image rollover without the real text triggering it

Question

I am trying to create a navigation menu which has image fadein/fadeout background onmouseover rollover, but with real text on top of it.

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.

https://jsfiddle.net/technov1king/1an1joxq/6/

HTML:

<div id="cf">
    <img class="bottom" src="http://dummyimage.com/300.png/09f/fff" />
    <img class="top" src="http://sciencenordic.com/sites/default/files/imagecache/300x/hopp_None_0.jpg" />
    <div id="tekst">MOVE MOUSE OVER TEXT<br>SLOW LEFT TO RIGHT</div>
</div>

CSS:

#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;
 } 

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.

Answer 1

You need to have your hover effect specified on the parent container of both the images and the text. That way, when the text is hovered on, the parent hover triggers.

#cf img.top {
  opacity: 1
}

#cf:hover img.top {
  opacity: 0
}

Answer 2

Here's one solution that doesn't require the whole container to hover, but does require a bit of markup moving around in order to use the adjacent sibling selector (the + selector):

 #cf { position:relative; height:281px; width:450px; margin:0 auto; } #cf img { position:absolute; left:0; transition: opacity 1s ease-in-out; } #cf #tekst:hover + img.top, #cf img.top:hover { opacity:0; } #tekst { margin: 0 auto; font-weight: bold; font-size: 18px; position: absolute; left: 30px; top: 130px; z-index: 3; } 

 <div id="cf"> <img class="bottom" src="http://dummyimage.com/300.png/09f/fff" /> <div id="tekst">MOVE MOUSE OVER TEXT <br>SLOW LEFT TO RIGHT</div> <img class="top" src="http://sciencenordic.com/sites/default/files/imagecache/300x/hopp_None_0.jpg" /> </div>