Making an image change colour on Hover!

Hi all,

With all the new changes in the last 12 months such as the brilliant filter effects on images, I want to make some images hover in a colour with some opacity.

I was hoping the filter effects would give me this option to add a colour, but cant seem to find a way with the tools provided.

Whats the most simplest way to do this now without code? Or is code the way- have about 30 images the client wants in colours on hover.

Thanks all !

Hey @AdieJAM

The easiest way to achieve this is with Psuedo-Element, which I am pretty sure has been covered here many times. And requires no code.

In CSS the filter property has some specific options.

1 Like

Cheers @Malachiman - i will look on the forum on it. I did a quick look and could not see - but i will keep hunting. i did try some code ! but got it to go grey, but not the colour i want !

I used Greyscale originally from an old code, but changed this to colour so not sure if I am getting the colour code correct and need opacity too.

You can’t add a Pseudo Element to an Image directly, because technically the img tag has no content. (I know, weird huh).

So right click the image, and wrap the image in a Div.

  1. Add a class to the Div. eg .test
    This class needs a position: relative

  2. Make another class with the Pseudo Element eg. .test::before
    Set the following
    Position: absolute
    Top: 0
    Left: 0
    width: 100%
    height: 100%

  3. This is the magic that makes it work on hover, make another class called .test:hover::before
    Set your BG colour for the overlay

Overlay_Hover_Example.bloc (714.1 KB)

1 Like

wow ! amazing !..I will try this now - thank you ! I just posted my code I tried in a personal message - didnt want to post it here incase people used my hack - which actually does nothing !

If you are just doing a colour overlay you dont use the 3rd class. You need to for a hover though, you cant use the hover selector for this as the css will be wrong…

eg.

Screen Shot 2022-01-14 at 7.34.57 AM

You will need to add some CSS to the page header if you want a nice transition.

Like this

<style>
.test::before {transition: background-color 0.5s linear;}
.test:hover::before {transition: background-color 0.5s linear;}
</style>

The Bloc you sent above - I seem to get it to go to green and makes the whole div green and overlays the image which is a shape in a png.

wish colours was built into filters in the class editors.

Oh you never mentioned a SVG shape. Thats makes it different.

1 Like

ah sorry! yeah - just need the image to change in an orange colour

I have to shoot off for an appointment will be back in a few hours.

1 Like

Here you go:
Just add the inline SVG into a code widget, give it a class to change color on hover and you’re good to go.

Kapture 2022-01-14 at 07.44.43

1 Like

Hi @Jerry

Thanks for looking at this!

The images are actually PNG images of various things but in shapes such as a hexagon or triangle, circle etc of an image like a person or an item.

When I hover over it they want it to fade with some slight ease into an orange colour with the supplier hex or RGB colour code.

I have found an old code where @Malachiman did on the forum which did greyscale - but need to incorporate colour into it somehow with some apacity.

Or the way you have done on your post, can I bring a png image into that? Or unless I convert the image into an SVG - then how would I get the code….or drag the svg image into code widget? Not sure how this would work! Not up yet as 5am here - & can’t sleep over this damn colour as they want to see it by 3pm today UK time!!!

Cheers all!

Hi all,

I changed my image to an SVG and still no good - tried everything ! - ill keep trying!