Question

I came across this slide effect that I wanted to try. Basically is slides a div over another div with a darkened background. When I hover over theimage…just the border turns dark. No text is shown over the image or anything. Can you see if anything looks out of wack??

CSS:

#container {
 width:400px;
 height:150px;
 position:relative;
 overflow:hidden;
 z-index:0;
 margin:0 auto;
 background-image:url(../images/slide-bg.png);
 border:10px solid #414141;
}

#container:hover {
 border-color:#303030;
}

#overlay {
 background-color:#000;
 display:block;
 position:absolute;
 top:0;
 left:0;
 width:400px;
 height:150px;
 z-index:1;
}

#hover {
 width:400px;
 display:block;
 height:100px;
 position:absolute;
 z-index:3;
 padding:25px;
 background-color:#1e1e1e;
 padding-top:150px;
 font-size:11px;
 font-family:Arial, Helvetica, sans-serif;
}

#hover p {
 color:#fff;
 font-weight:normal;
}

HTML:

<div id="container">
    <div id="overlay">
    </div>
    <div id="hover">
        Some Text here????
    </div>
</div>

Jquery:

$(document).ready(function () {
    var colour = $("#overlay");
    var content = $("#hover");
    content.hide();
    colour.hide();
});

$("#container").hover(function() {
    content.show().css({ "left" : "-400px" }).animate({left : 0}, 300);
    colour.stop().fadeTo(500, .7)
},function() {
    content.animate({left : 400}, 300);
    colour.stop().fadeTo(500, 0)
});

Answer 1

It’s in your css.. It’s because you have

padding-top: 150px;

which pushes the text way below the box.

I commented it out in the fiddle below and it’s showing up.

Also you want to put your .hover code inside the $(document).ready function

http://jsfiddle.net/wirey00/vCe6N/