Grayscale on my homepage when un-hover

Hi,

Can you help me write the CSS code, how to make the homepage grayscale when it is loaded?
Upon users hover over the image then it will show colours.

Thanks!

Hi,

Sorry, but we don’t understand what do you mean. Could you please provide us some example?

Regards

Hi,

Can you look at this example?
http://www.qriosity.com.sg

When it is hover over then the colour appears.

Thank you!

We can’t see the content on your website because of password protection.

Sorry, password is below

Try to add the following code snippet to the Custom CSS area in Theme Settings to do this

.promo-banner .banner-image,
.product-grid-item .product-element-top img {
        filter: grayscale(100%) opacity(0.99);
    -webkit-filter: grayscale(100%) opacity(0.99);
    -moz-filter: grayscale(100%) opacity(0.99);
    -o-filter: grayscale(100%) opacity(0.99);
    -ms-filter: grayscale(100%) opacity(0.99);
    
        transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
} 
.promo-banner:hover .banner-image,
.product-grid-item:hover .product-element-top img {
        filter: grayscale(0) opacity(1);
    -webkit-filter: grayscale(0) opacity(1);
    -moz-filter: grayscale(0) opacity(1);
    -o-filter: grayscale(0) opacity(1);
    -ms-filter: grayscale(0) opacity(1);
}

Hi,

I have applied the CSS code.

1) the banner was not black and white
2) can the buttons be black and white as well?

Kindly advise.

Thank you!

Hi,

1. Banners are black and white now.

2. The color for that button is set for you in the source code so you can change it there https://gyazo.com/6bf927d8f891100a21684d98044cceb6

Regards

Hi,

Is there any screenshot that I can see from your screen?

The banner is still with colours, the TO NEW is still in Teal
kindly let me know if I seen wrongly

Here is a screenshot https://gyazo.com/eb12bfb9003fbc18ec7422e75172074b

apologies, I meant the slider on top

Use this also

.wpb_revslider_element .tp-bgimg {
        filter: grayscale(100%) opacity(0.99);
    -webkit-filter: grayscale(100%) opacity(0.99);
    -moz-filter: grayscale(100%) opacity(0.99);
    -o-filter: grayscale(100%) opacity(0.99);
    -ms-filter: grayscale(100%) opacity(0.99);
    
        transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.wpb_revslider_element:hover .tp-bgimg {
        filter: grayscale(0) opacity(1);
    -webkit-filter: grayscale(0) opacity(1);
    -moz-filter: grayscale(0) opacity(1);
    -o-filter: grayscale(0) opacity(1);
    -ms-filter: grayscale(0) opacity(1);
}

it works, thanks!

Hi,

How about this page? link below

can l make the image or the moving icons into greyscale and hover over then the colour appears?

Use this also

.wpb_revslider_element .tp-caption img {
        filter: grayscale(100%) opacity(0.99);
    -webkit-filter: grayscale(100%) opacity(0.99);
    -moz-filter: grayscale(100%) opacity(0.99);
    -o-filter: grayscale(100%) opacity(0.99);
    -ms-filter: grayscale(100%) opacity(0.99);
    
        transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.wpb_revslider_element .tp-caption:hover img {
        filter: grayscale(0) opacity(1);
    -webkit-filter: grayscale(0) opacity(1);
    -moz-filter: grayscale(0) opacity(1);
    -o-filter: grayscale(0) opacity(1);
    -ms-filter: grayscale(0) opacity(1);
}

works. thanks!

You are welcome!

[Author]

Posts