[David BParticipant]

Hi Support,

I hope you can help. I’m trying to get an image to appear black and white on the site and then when the mouse hovers over the image the photo changes to color. Is this possible with the [image] shortcode, or can you advise how i can do this?

Thanks for your help.

All the best

David.

[Kosher KMember]

Hi David,

Thanks for writing in,

Yes, Its possible, As I understand

Just add a class on your image,

e.g. add a class change-on-hover on image class field,

Then add this code below in Customizer > Custom > CSS

.change-on-hover {
webkit-filter: grayscale(1); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
filter: gray; filter: grayscale(100%);
}

.change-on-hover:hover {
webkit-filter: none; 
-webkit-filter: none; 
-moz-filter: none;
filter: none;
}

Hope that helps,

Cheers

[David BParticipant]

Brilliant – thanks guys, great service as always!

[Kosher KMember]

No Problem,

Have a great day 🙂

[MichaelAnthonyMurrayParticipant]

How would I make the “On Hover” action to add a specific color around the photo?

[Rue NelModerator]

Hello There,

Thanks for updating this thread!

To add a specific color around the photo, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.change-on-hover:hover {
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}

We would loved to know if this has work for you. Thank you.

[CanadianExpatParticipant]

Hello,

Just a quick question regarding the first response above. I understand all of the steps except how to “add a class change-on-hover on image class field”. Basically, where do I input: change-on-hover ?

Thanks!

[RadModerator]

Hi there,

If you’re using standard shortcode, then you can simply add it like this,

[image class="change-on-hover"]

If you’re using cornerstone, then you can simply inspect your image element, then add change-on-hover on class input like this.

But before you can add a class name, you should enable advance controls first like from that screenshot.

Cheers!

[CanadianExpatParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for updating the thread!

I’ve checked your site and in your custom CSS in the Customizer, there’s a missing closing curly bracket in it (see: http://prntscr.com/8yhqqr). Please add it after this code in your Customizer CSS:

.x-navbar {
    border-bottom: none;
    box-shadow: none;

Hope this helps. 🙂

Thank you!

[CanadianExpatParticipant]

Wow my mistake. This fixed it. Thanks very much for your fast service. 🙂

[ZeshanMember]

You’re welcome! 🙂

[Author]

Posts