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.
Cheers @PeteSharp - 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.
Add a class to the Div. eg .test
This class needs a position: relative
Make another class with the Pseudo Element eg. .test::before
Set the following
Position: absolute
Top: 0
Left: 0
width: 100%
height: 100%
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)
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.
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.
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.
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.
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 @PeteSharp 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!
