Featured products background

[Jaje]

Hi guys,

I have total of 6 products shown in the featured products block on my homepage. I'm trying to modify "homefeatured.css" so when I hover over the certain product, background shows covering the space behind everything inside that product's margin. I succeeded in making background behind the picture, name, description, and price but i would like to make background covering everything together as soon as the mouse pointer hovers over the product's margin. Any ideas how to do that?

Edited May 7, 2013 by Jaje (see edit history)

[vekia]

i need an additional info to better understand you needs.

 

you want something like: http://www.leotheme.com/demo/prestashop14x/?template=leo_sportshoes ?

just check the page and hover mouse over the product , you want something similar? Am I right?

[Jaje]

Yeah that's it!

[vekia]

It's complicated a bit, you should use css / jquery functions and modify the code of the homefeatured.tpl.

 

know how for that:

1. add position:relative; overflow:hidden; to <li> with product details and add "liclass" to the class="" param
   
2. create new (between the <li></li> tags) div with position:absolute; bottom: 160px;
   
3. create jqeury script $(".liclass").hover(function(){change div bottom to 0px;}, function() { put it back to 160px; });
   

[Jaje]

Thanks I'll try it!

[vekia]

Thanks I'll try it!

 

let me know when modification will be ready.

anyway, if you've got any questions - feel free to write

 

regards