CODEWITHSUNDEEP
jquerycss
Aessandro
Aessandro

Reputation: 5761

css overlay issue

Hi guys how can I get the red overlay to slide behind the content rather than with the content? http://jsfiddle.net/MZL5q/3/

I am trying with:

.transparent_layer{
background: url('../images/overlay_repeat.png') repeat-y 0 0;
width:810px;
margin:0 auto;
padding-top: 14px;
height:0;
z-index: -99999;
background-color:red;
}​

Upvotes: 0

Views: 69

Answers (2)

Mihai Matei
Mihai Matei

Reputation: 24276

Please check out this http://jsfiddle.net/MZL5q/13/

CSS

.behind-layer {
    background: url('../images/overlay_repeat.png') repeat-y 0 0;
    width:810px;
    margin:0 auto;
    padding-top: 14px;
    height:0;
    z-index: 1;
    position:absolute;
    background-color:red;
}

.transparent_layer {
    width:810px;
    position:absolute;
    z-index:2;
}

JS

$('.behind-layer').animate({
  height: '670'
}, 5000, function() {
  // Animation complete.
  alert('completed');
});

HTML

<div class="behind-layer"></div>
<div class="transparent_layer">
<!-- THE REST OF HTML CONTENT -->

Upvotes: 2

JoeFletch
JoeFletch

Reputation: 3960

jsFiddle

You need to make another div to animate with the transparent_layer class and make it position:absolute;.

For your information, if this is not at the top of your page in your production version of the site, then you may need to change some positioning aspects of the div's. I read this tutorial many many times. CSS Positioning.

Upvotes: 3

Related Questions