Rollover Image

Support
#1

Hi,
I have a site I am designing in cornerstone and on this particular page, I have a series of logos (see screenshot). I would like them to start greyscale and then once hovered over they turn to colour.

I have both sets of logos on greyscale and in colour at the same size. Would someone be able to tell me the appropriate steps to take to make this happen please.

Thanks

http://new.creation360ltd.com/client-portfolio/

#2

HI there,

You can just add the normal colored image on the space and use CSS to convert it to grayscale and another CSS to remove the grayscale when the image is hovered,

First thing you need to do is to add the images on the page and add a class to the images. Let’s say the class you added to the image is grayscale then add this code in the custom CSS:

.grayscale {
  filter: gray;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);    
}

.grayscale :hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Hope this helps.

#3

Hi There,

Thank you for that.

The code only seems to change each of the images to grayscale. It does not filter through to colour when hovered over. Could you assist please.

Thanks

#4

Hi there,

My apologies, the hover code should be:

.grayscale:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Hope this helps.

#5

Thank You so much it works now :slight_smile:

#6

You’re welcome. :slight_smile:

#7

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