Sliding Panels sitting underneath content?

Question

This is a follow up on a previous question...I was helped out by Marcatectura (thanks again!) , and this is the example they gave me: http://jsfiddle.net/rt9d5/10/embedded/result/

I decided to change the 'li' elements to 'div' elements, as it works better for my intended design. But as I'm not that well versed in jquery I've done something wrong in trying to get mine to look the same. http://fiddle.jshell.net/faedince/L4L4N/ (Here's a little bit of my code.)

#panelOne:after {
    display: block;
    background: red;
    opacity: 0.9;
    width: 350px;
    height: 350px;
    content: "";

    -webkit-transition: -webkit-transform 500ms ease-out 0s;
    -moz-transition: -moz-transform 500ms ease-out 0s;
    -o-transition: -o-transform 500ms ease-out 0s;
    transition: transform 500ms ease-out 0s;


$( '#panelOne' ).click(function(){
    $( '#panelOne' ).removeClass( 'clicked' );
    $(this).addClass( 'clicked' );
}); 

The red covers are sitting underneath the white panels, and are too far down the page. As per the example they're supposed to be on top of the white panels. Could someone tell me what I'm doing wrong please?

Answer 1

It looks like you need to add position: absolute to your :after classes (along with the top and left positioning). You can also get away with simplifying your JS a bit. Instead of trying to code for every possible click combination, make one bit of code that can apply to all of them.

Demo Fiddle

CSS: you can replace all of your individual :after css calls with the following.

.bigbox > div:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    background: red;
    opacity: 0.9;
    width: 350px;
    height: 350px;

    -webkit-transition: -webkit-transform 500ms ease-out 0s;
    -moz-transition: -moz-transform 500ms ease-out 0s;
    -o-transition: -o-transform 500ms ease-out 0s;
    transition: transform 500ms ease-out 0s;
}

JS:

$('.bigbox div').on('click', function(){
    $('.bigbox div').removeClass('clicked');
    $(this).addClass('clicked');
});