Looking for a way to incorporate slide in/out descriptions to images using jQuery like the method outlined here. Upon implementation on my website, the text within the <p> tag slides in as expected, but an issue arises where the background of the text appears below the image. Despite adjusting the z-order to no avail, I have yet to pinpoint a simple example demonstrating this problem. Perhaps it's a common stumbling block...
$(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;
}