[Matt GParticipant]

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!!!

[Prasant RaiModerator]

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.

[Matt GParticipant]

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

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

[ChristopherModerator]

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.

[Matt GParticipant]

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!!!!

[Matt GParticipant]

This reply has been marked as private.

[ChristopherModerator]

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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

Thanks.

[Matt GParticipant]

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!!!

[RadModerator]

Hi there,

Change your css to this,

.img-change-on-hover:not(:hover){
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#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,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

Cheers!

[Matt GParticipant]

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?

[RadModerator]

Hi Matt,

It’s perfectly working on my end. What’s your browser versions?

Here is a video recording from my end. https://cloudup.com/c_luQj9cDQb

Thanks.

[Matt GParticipant]

But it’s not. 🙂

Here’s a screenshot of what the icon looks like without the class applied:

http://s3.postimg.org/h55a1ruw3/full_color.png

Here’s what it looks like when you hover:

http://s4.postimg.org/hcsdaip25/hover_colors_washed_out.png

See how the color is washed out. It’s the same thing that happens to all images that have links…we’ll call ’em clickable images. Note the dark colors in the past two screenshots on the Facebook icon. Here’s what that icon looks like when you hover…no class applied to it at all…just a link behind it to their Fb page:

http://s7.postimg.org/oiofgvtpn/facebook_washed_out.png

See how it fades or washes out the original image? That’s what’s still happening when you hover. The last bit of CSS didn’t work in IE or Edge (I’ve just upgraded to Windows 10…but I also check the functionality on my Windows 8.1 laptop with both Firefox and Chrome). The CSS before the most recent version did work in IE/Edge:

.my-class{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

So I think the above code will work to start with the images in grayscale form and then change to the original (color) image on hover.

Let’s take this from a different angle. How to I disable the default behavior to dim/fade/wash out a clickable image on hover? Like on the rest of the social media icons in that row. None of them have a specific class defined, so they are using the default behavior for an image that has a link associated with it…when you hover, it dims/fades/washes out. How can I disable that effect?

THANK YOU!!! 🙂

[RadModerator]

Hi there,

I see, you simply mean opacity. Add this value along with your css.

.my-class{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    opacity:1;
}

Thanks.

[Matt GParticipant]

I was hopeful, but it’s still not working. 🙁

I feel like such a pain in the butt! I’m so sorry!!

[Rue NelModerator]

Hello There,

Regretfully, css filter doesn’t work in all IE browser.
For more information, please check out out here: http://caniuse.com/#search=filter

Hope this helps.

[Author]

Posts