Transparent Image or Icon Hover Color

Support
#1

Hi, I am trying to make a section where i have some transparent images that are icons. When someone hovers over these images, I would like for the image to change color, but not the background since it’s transparent. If this is not possible, how can i get get icons to change color on hover? Or maybe I can upload my own icons?

#2

Hey Daniel,

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.

#3

here is my url plus more information. If you need access to anything let me know, if not and you could tell me what to do, that’d be great!

#4

Hi Daniel,

To make your images white on hover, first assign a class e.g inverted to all of your 4 images and then add the following code in the Theme Options > CSS:

.inverted:hover {
  filter: invert(100%);
}

To make the images clickable, go to your image settings in Cornerstone and then turn on the Link option and enter your URL in the URL field (see screenshot)

Hope this helps!

#5

doesnt quite work unfortunately. It only works on mobile for some reason.

#6

Hey Daniel,

I checked your site and there is an extra closing bracket in your Cornerstone page CSS section which is breaking the code (see screenshot)

Please remove the extra closing bracket and see if it works. If it doesn’t then try adding the above code globally in the Theme Options > CSS

Also clear all caches after making changes. Let us know how this goes!

#7

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