Question

I am trying to add some slide in/out descriptions to images using jQuery as described here. When I apply it to my site, the text (in the <p>) slides in as expected, but for some reason, the background of the text is shown under the picture. I have played with z-order with no effect. So far, I haven’t been able to isolate this in an simple example, but I was hoping that this was one of those common problems…

$(document).ready(function() {

    $(".product-image").fadeIn("slow");  

    $(function(){  
        $('.productInfo').showFeatureText();    
    })

$.fn.showFeatureText = function() {
    return this.each(function(){    
    var box = $(this);
    var text = $('p',this);            

    box.hover(
        function(){
            text.slideDown("fast");
            text.css('z-index', '1000');    
        },
        function(){
            text.slideUp("fast");
        }
    );

  });
}

}); 

---

.product {
    float: left;
    margin: 10px 12px;
    width: 215px;
}

    .product .productInfo {
        height: 250px;
        overflow: hidden;        

    }

        .product h3 {
            font-size: 1.75em;
            font-weight: normal;
            margin: 0 0 0px 0;
            padding: 0;
        }

        .product-image {
            background-color: #edece8;
            border: 1px #e6e3d8 solid;
            height: 200px;
            margin: 0 0 0px 0;
            padding: 6px;
            width: 200px;
            display:none;

        }

        .product p {
            margin: -75px 6px 6px 6px;
            display:none;
            background: #000000; url(/Images/feature_bg.png) repeat;
            overflow: hidden;
            height:65px;
            width:200px;
            z-index:1;
            overflow:hidden;
        } 

Answer 1

z-index is pointless without a position, so try setting position:relative on the picture and its containers and the p and it’s containers. Also, be sure to set the z-index on all of these as well.