Question

Okay, I thought I would be able to do this no problem, but for some reason I can’t figure it out.

I want to have three boxes, with them stacked sort of like cards. Middle box showing on load, the other two behind. Then when the user hovers over one, it’s z-index increases and the box goes in front. The boxes will stay in the exact same place that they are on page load, I just want to have them fully appear on hover, which I’m assuming can be done by toggling their z-index.

Here is as far as I’ve gotten: http://jsfiddle.net/q8nYz/ (I’m just doing on click for now)

<div id="#container">

    <div id="box-1" class="box"></div>
    <div id="box-2" class="box active"></div>
    <div id="box-3" class="box"></div>

</div>

#container {
    margin: 0 auto;
    position: relative;
    width: 960px;
}

.box {
    background: gray;
    border: 2px solid black;
    float: left;
    height: 300px;
    position: absolute;
    width: 300px;
    -webkit-border-radius: 10px;
}

#box-1 {

}

#box-2 {
    left: 200px;
}

#box-3 {
    left: 400px;
}

.active {
    z-index: 1;
} 

$(".box").click(function() {

    if ($(".box").hasClass("active")) {
        $(".box").removeClass("active");
    }

});

Answer 1

something like this – http://jsfiddle.net/q8nYz/2/

.box:hover{
     z-index: 100;   
}

it only needs css.