Hide on :hover, DIV over DIV

Question

I have a DIV on top of another DIV.

What I want to achieve is hide the DIV on top to be able to access the DIV below.

I've tried opacity, but since the top DIV is still there, just transparent, It won't allow me to interact with the content of the DIV below. I've also tried display:none;, visibility: hidden; and z-index. None of those would work.

How do I achieve this with CSS3, so I can also use a transition?

HTML:

<li class="panel-box"> 
    <div class="front box-style"> </div>
    <div class="back"> </div> 
</div> </li>

CSS:

.panel-box {
    margin: 5px;
    padding: 0;
    display: inline-block;
    clear: none;
    float: left;
    width: 310px;
    height: 200px;
    position: relative;
}

.box-style {
    background-color: red;
}

.front {
    width: 310px;
    height: 200px;
    z-index: 5;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.front:hover {
    opacity: 0;
    display: none;  
}

.back {
    width: 310px;
    height: 200px;
    background-color: rgba(57, 54, 55, 0.95);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

Thanks a bunch.

Answer 1

I've put together a bit of a workaround that seems to do some of this, but it will likely fail miserably on IE.

Tested and works reasonably on Chrome… YMMV :)

It uses a combination of z-index and sibling selectors to allow the front/back divs to swap places in the stacking context.

I had to swap places with front/back to use the CSS sibling selectors. I don't claim this is a perfect example, but perhaps it'll get the ideas flowing.

Basically what is happening here is:

• As the mouse enters - trigger .front:hover
• front z-index goes to -1 triggering .back:hover
• back z-index immediately goes to 100 keeping it on top of the stack
• sibling selector back:hover + front keeps the front opacity at 0
• When the mouse transitions out, this all reverses

The reverse transition is not very smooth - haven't quite figured out if that can be fixed yet.

Demo

CSS

.panel-box {
    margin: 5px;
    padding: 0;
    display: inline-block;
    clear: none;
    float: left;
    width: 310px;
    height: 200px;
    position: relative;
}

.front {
    width: 310px;
    height: 200px;
    padding: 10px;
    z-index: 5;
    opacity: 1;
    display: block;
    position: absolute;
    background-color: red;
    top: 0;
    left: 0;
    -webkit-transition: opacity .5s ease;
}

.front:hover {
    opacity: 0;
    z-index: -1;
}

.back {
    width: 310px;
    height: 200px;
    padding: 10px;
    color: white;
    background-color: rgba(57, 54, 55, 0.95);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    -webkit-transition: opacity .5s ease;
}

.back:hover + .front {
    opacity: 0;
}

.back:hover {
    z-index: 100;
    opacity: 1;
}

HTML

<li class="panel-box">
    <div class="back">content goes here</div>
    <div class="front box-style"></div>
</li>