Question

I’m working on resolving this hover issue on my site. Whenever I roll over a product, the product description shows up underneath it and I can’t for the life of me figure out how to fix it:

http://lovelylovely.me/shop/

It’s using the sentient theme but after spending some time in firebug trying to dig into the css, I’m still unable to figure out how to move the the product description so that it shows up on top of the image instead of underneath it.

Any help is greatly appreciated. Thanks!

Answer 1

I think this should work for you:

// removes img from the flow, so doesn't push other elements down:
.product > img{position:absolute;z-index:1} 

//on hover, give the other elements positioning & z-index 
// so they're not hidden by the image:
.product:hover h3,
.product:hover .amount,
.product:hover .excerpt,
.product:hover .button add_to_cart_button product_type_simple
    {position:relative;z-index:2}