The Ultimate Marketpress Product Styling

Hi All

I am just seeing if any CSS style gods out there can beat this?

#mp_product_list .mp_product { position: relative; width:250px; height:250px; float:left; margin-right:16px; overflow: hidden; }
#mp_product_list .mp_product_content { position:absolute; top: 0px; left: 0px; width:250px; height:250px; overflow:hidden; }
#mp_product_list .mp_product_name { position:absolute; bottom: 30px; left: 0px; z-index: 10; font-size:15px; text-align: center; }
#mp_product_list .mp_product_name a {background-color:black;text-decoration:none;}
#mp_product_list .mp_product_name a:hover {background-color:white;text-decoration:none;}
#mp_product_list .mp_product_meta { font-size:0px; }
#mp_product_list .mp_product a {color:white;text-decoration:none;}
#mp_product_list .mp_product a:hover {color:black;text-decoration:none;}
#mp_product_list .mp_product_content img { width:250px; height:250px; position: absolute; z-index: 1; }
#mp_product_list .mp_product_content a img { width:250px; height:250px; }

This makes the product image 250px wide and high, float left, have the title appear above the image, kill the meta.

Can anyone make it cooler?

It is for this guys site selling uni books here:

What do you think? Any way to make it even more slick?



PS: Anything that works perfectly in all browsers including legacy and looks more modern will get a decent reputation reward :slight_smile: