Color images displayed as grayscale until mouseover? – Themeco Community

Color images displayed as grayscale until mouseover?

Matt G — Fri, 31 Jul 2015 18:11:27 +0000

I’d like to have the social icons section display images as grayscale until you hover, then they would go full color. Right now they are all grayscale and the default hover behavior is in effect. I was just going to set the hover image to change in the image element details panel in Cornerstone, but I don’t see that it’s possible. I think, based on another post, this may be possible via a class, but what worked for the other guy didn’t work at all for me…

Thanks again for all your help!!!

Reply To: Color images displayed as grayscale until mouseover?

Prasant Rai — Fri, 31 Jul 2015 21:40:14 +0000

Hello Matt,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

Reply To: Color images displayed as grayscale until mouseover?

Matt G — Sat, 01 Aug 2015 01:51:59 +0000

Sorry! Here’s a link. It’s the section right under the slider.

http://splash.fireonthemountain-burningboards.com/

Reply To: Color images displayed as grayscale until mouseover?

Christopher — Sat, 01 Aug 2015 05:59:19 +0000

Hi there,

Please replace current images with original images you want to display on hover effect, add a class name like my-class to images, next add the following code in Customize -> Custom -> CSS :

.my-class{
-webkit-filter: grayscale(100%);
 filter: grayscale(100%);
}
.my-class:hover{
-webkit-filter: grayscale(0);
 filter: grayscale(0);
}

Hope that helps.

Reply To: Color images displayed as grayscale until mouseover?

Matt G — Sat, 01 Aug 2015 13:01:32 +0000

Thanks for the reply! That kind of worked. It’s defaulting to grayscale before the hover and changing to color when you hover, but something is causing the hover to wash out. I think it’s the default control for images with links because the other three in that row have the same default behavior. I’m thinking we need to disable that default “dim”, if you will, that happens on images with links behind them.

As always, thanks for all your help!!!!

Reply To: Color images displayed as grayscale until mouseover?

Matt G — Sat, 01 Aug 2015 13:03:22 +0000

This reply has been marked as private.

Reply To: Color images displayed as grayscale until mouseover?

Christopher — Sat, 01 Aug 2015 13:30:02 +0000

Hi there,

I can’t replicate the issue on my end, it works fine :

Please update your code to the following to make the code works in IE too :

.my-class{
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.my-class:hover{
{
    filter: url("data:image/svg+xml;utf8,#grayscale");
    -webkit-filter: grayscale(0%);
}

Thanks.

Reply To: Color images displayed as grayscale until mouseover?

Matt G — Sat, 01 Aug 2015 13:38:52 +0000

It would probably help if you knew what the full color image looked like! 🙂

http://s30.postimg.org/65z9t11pp/shoponline.png

The hover image does remove the grayscaling, but I think the default hover behavior where it dims the image is still happening.

Thank!!!

Reply To: Color images displayed as grayscale until mouseover?

Rad — Sat, 01 Aug 2015 21:32:59 +0000

Hi there,

Change your css to this,

.img-change-on-hover:not(:hover){
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.img-change-on-hover:hover{
{
    filter: url("data:image/svg+xml;utf8,#grayscale");
    -webkit-filter: grayscale(0%);
}

Cheers!

Reply To: Color images displayed as grayscale until mouseover?

Matt G — Sun, 02 Aug 2015 00:23:08 +0000

It stopped working in IE. 🙁 AND, the behavior is still wrong. When I look at the site in either Chrome of Firefox, you can see it change to the colored icon for a split second, then you see that icon get washed out. It’s whatever the default behavior is on an image with a link when you hover…just like the other three in that row.

Thoughts?