Hey bryguy86 ,

You can add in colored images and make them grayscale using some CSS. 

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

.nectar-fancy-box[data-style="image_above_text_underline"].aspect-3-2:hover .box-bg {
    filter: invert(1);
}
.nectar-fancy-box[data-style="image_above_text_underline"].aspect-3-2:hover .box-bg {
    filter: grayscale(1);
}

Thanks

Hey Again,

In that case you will have to put in colored image and make them grayscale using the CSS below:

.nectar-fancy-box[data-style="image_above_text_underline"].aspect-3-2 .box-bg {
    filter: grayscale(1);
}
.nectar-fancy-box[data-style="image_above_text_underline"].aspect-3-2:hover .box-bg {
    filter: grayscale(0);
}

Thanks.

Hello Interritor .

Thanks for writing to us.

Please share your website URL so that we can check this out and assist you better.

Looking forward to hearing from you.

Hi there,

Please try this CSS:

.full-width-section img {
    display: initial;
}
.nectar-fancy-box .fancy-box-custom-icon, .nectar-flickity:not(.masonry) .flickity-slider .cell .nectar-fancy-box .fancy-box-custom-icon {
    filter: brightness(1.5);
}

I hope this helps.

Please feel free to open a new ticket in case of any other queries.

Hi there,

Thanks for writing back.

Looks like you made some changes here, it's not the same layout and behavior as before:

Do you want these changes for all the icons?

Please let us know.