[jtragg]

I’m trying to get rid of the greyscale fade that happens on all images throughout the site, i would like it to only effect thumbnails. Ive been messing with the CSS, but it seems the main css files properties are over writing the new ones. is there a simpler solution to this?

Thanks,

James

[Juanfra Aldasoro]

Hi James,

Thanks for writing. I’m not getting clear where is that you want to maintain the greyscale?

Thanks,
Juan

[jtragg]

oh sorry, I only want to keep a transition on the smaller thumbnail images, I do not want the greyscale fade on the full size images in the portfolio or the full size image on the homepage. The greyscale fade is only on :hover

thanks for the quick reply!

[Juanfra Aldasoro]

Hi James,

No problem 🙂 I’m happy to help.

You can try adding the following css over your custom.css file or within the custom css field in your theme options:

.single .featured-image:hover,
.post .featured-image:hover,
.flexslider .slides img:hover{
	filter: none;
}

Best,
Juan.

[jtragg]

seems to still be turning the larger images greyscale on mouseover:

http [://] jamestraggianese [dot] com/jcalm/?portfolio=running

[Juanfra Aldasoro]

Hi James,

I can see the you’ve added the filter property over the file custom.css

Please replace filter: none 0 !important;

With filter: none;

In which browser are you checking the changes?

Best,
Juan.

[jtragg]

I am checking in both chrome and firefox.

it is changed back to filter: none; I was just seeing if !important would change anything

[Juanfra Aldasoro]

Great – how do you see it now?

Best,
Juan

[jtragg]

it is still turning greyscale on mouse over

[jtragg]

after more extensive testing, it is fixed in firefox, but chrome and safari both still show the greyscale on hover

[jtragg]

For anyone else who may want to disable this feature here is my complete CSS for disabling the greyscale hover property (on non-thumbnail images).

.single .featured-image:hover,
.post .featured-image:hover,
.flexslider .slides img:hover {
filter: none; /* works for firefox */
-webkit-filter: none; /*for chrome/ safari */
-webkit-transition: none;
}

This has disabled it in all the browsers I have tested with, Thanks for helping me figure this out

[Juanfra Aldasoro]

Hi James,

Brilliant 🙂 Thanks for sharing!

Have a nice day,
Juan.