Image hover colour change?

Guys can you tell me is it possible to have a black and white image in a theme and then when you hover over it it goes to colour?

We want to have a black and white website and when you cursor over the image it will show colour?

Can this be done?

Hi there,

Yes, this is indeed possible but it also depends on how you will setup your images.

If you are using the image element in Cornerstone, add a class to the image element that you want to be darkened then colored when hovered.

You can add a class to an element by clicking on the customize option then you should see the class field.

Once you added a class field, add this css to the Global CSS panel:

.grayscale {
	position: relative;
}
.grayscale:after {
	content: '';
	background-color: rgba(0,0,0,0.8);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity 0.5s ease-in;
}

.grayscale:hover:after {
	opacity: 0;
}

The code above assumes that the class you have added to the image element’s is grayscale.

Hope this helps.

1 Like

This is great it has greyscaled all images however on hover the image does not go to colour unfortunately? Is something wrong with the CSS?

Hi There,

Seems the CSS looks fine. Not sure why this not working.

Can you try adding importantly to the opacity
Example!

.grayscale:hover:after {
	opacity: 0 !important;
}

If that doesn’t help please send us your website URL so that we can check.

Thanks

Unfortunately no :frowning: If you have any other thoughts as we would love to have this feature?

Hello @Adeptis,

Thanks for updating the thread. :slight_smile:

I just recorded a screencast for the code that was shared by my colleague @Jade. Please take a look as the code is working fine on my end too. https://cloudup.com/cV0Eh2ysyR2

I just wanted to confirm that you are adding the CSS codes under Pro > Theme Options > CSS and not under customizer Appearance > Customize > Additional CSS as customizer can have conflicts.

If problem is still there, please share website URL for us to take a closer look.

Thanks.

Unfortunately the images are background images and not inserted images can we do this with background images?

Hi Matthew,

Please give us the exact URL of the page you are talking about and screenshot indicated which background image you are talking about and we may come up with a CSS solution.

If you added the background image to a section in the Cornerstone you will need to follow the steps below:

1- Go to the section in question and click on the magnifying glass icon to access the section option and click on the Customize tab and add graybg class:

2- Go to X > Theme Options > CSS and add the CSS code below:

.graybg .x-bg > div {
    filter: grayscale(100%);
    transition: all 600ms;
}

.graybg:hover .x-bg > div {
    filter: grayscale(0);
    transition: all 600ms;
}

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.