i trying add slide in/out descriptions images using jquery described here. when apply site, text (in <p>) slides in expected, reason, background of text shown under picture. have played z-order no effect. far, haven't been able isolate in simple example, hoping 1 of 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; }
z-index pointless without position, try setting position:relative on picture , containers , p , it's containers. also, sure set z-index on of these well.
Comments
Post a Comment