Grey Shadow Rollover on product grid image

[acory1]

Hi,

Unlike most it seems, I don't like the grey rollover block (add cart, compare, view buttons) which covers the individual products in a category grid when you mouse over (default theme).

Is there any way of removing or diminishing the grey (transparent would be great)?

Cheers

AC 

[dioniz]

Do you mean grey price background?

[acory1]

No. When you move the cursor over the individual product images there's a big dark grey overlay that has 'add cart' 'select to compare' and 'view' buttons on it...and it's ugly! 

[dioniz]

Is it possible to see your site?

[acory1]

Sure. Here's a category area Home

[adamssmiths]

great information i must sa you have great knowledge Thanks for sharing .. 

[dioniz]

I can't see what file is this code in, because you have CCC turned on but it's probably in global.css or product_list.css

So find this code:

 

#product_list .poverlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 2;
}

Change your background. First 3 numbers after rgba are red green blue color codes and last one is opacity.  If you want it transparent just replace 0.7 with 0.

 

Then you have another style for view button bg:

#product_list li .viewbutton {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    bottom: 0;
    display: block;
    left: 0;
    padding-bottom: 10px;
    padding-top: 10px;
    position: absolute;
    width: 100%;
}

Change background if you want to.

[acory1]

Thank you very much!