Switch off black and white filter

This topic has 13 replies, 2 voices, and was last updated 7 years, 2 months ago by Artem Temos.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
October 4, 2017 at 3:31 am #20692

joyceloh
Participant

Hi,

I need to Switch off black and white filter for all pages, except Homepage.
Can you guide me on the CSS code?

Thank you.

October 4, 2017 at 6:27 am #20704

Artem Temos
Keymaster

Hello,

Could you please provide us a screenshot of what do you call black and white filter?

Thank you

October 4, 2017 at 6:39 am #20705

joyceloh
Participant

hi,

these are the screenshots, when l hover over the colour changes. I need to Switch off for all pages, except Homepage.

For the About Slider, i need the 5 icons effects to be animated forever too. it tends to stop moving after awhile.

Thank you.

Attachments:
You must be logged in to view attached files.

October 4, 2017 at 6:46 am #20709

Artem Temos
Keymaster

In this case, you need to move that CSS code from Custom CSS to the custom CSS field in Visual Composer for the home page only.

October 4, 2017 at 6:48 am #20710

joyceloh
Participant

this codes are all i have in Custom CSS, which do l delete?

.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);
}
.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);
}
.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);
}
.social-icons li:before {
display:none;
}
.product-design-alt .product-tabs-wrapper {
background-color: #50bcbb!important;
padding: 1px 0!important;
}
.woocommerce-product-details_short-description hr {
width:100%;
}

October 4, 2017 at 8:55 am #20716
Artem Temos
Keymaster
This code
```
.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);
}
.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);
}
.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);
}
```
October 23, 2017 at 9:22 am #22294

joyceloh
Participant

hi,

thanks for your advise, however after l deleted the codes, the hover effect of my homepage slider is switched off. Initially l was able to see colour of the banner after I hover over.

This is the codes i have, kindly advise if l missed out anything

.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;
}
.social-icons li:before {
display:none;
}
.product-design-alt .product-tabs-wrapper {
background-color: #50bcbb!important;
padding: 1px 0!important;
}
.woocommerce-product-details_short-description hr {
width:100%;
}

Attachments:
You must be logged in to view attached files.

October 23, 2017 at 9:58 am #22300

Artem Temos
Keymaster

Did you move that code to the Custom CSS area for the home page in Visual Composer or simply removed it?

October 24, 2017 at 1:37 am #22369

joyceloh
Participant

i simply removed it from Customise>CSS codes

what should l do now?

All is in order, except i need to make the hover effect of my homepage slider work.Initially l was able to see colour of the banner after I hover over.

October 24, 2017 at 6:31 am #22388

Artem Temos
Keymaster

You need to move that CSS code from Custom CSS to the custom CSS field in Visual Composer for the home page only. Find this field while editing your home page in Dashboard -> Pages.

October 24, 2017 at 7:36 am #22400

joyceloh
Participant

Hi,

Noted, which CSS code do l move? thanks

October 24, 2017 at 8:12 am #22403
Artem Temos
Keymaster
This code
```
.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);
}
.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);
}
.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);
}
```
October 24, 2017 at 8:17 am #22407

joyceloh
Participant

it works! thanks!!

October 24, 2017 at 8:35 am #22409

Artem Temos
Keymaster

You are welcome!
Author

Posts