overlay effect on hover with image

[alessiarodler]

Hey there,

there is a way to create a simple overlay effect on mouse hover with a linked image?
I already tried some CSS, but it doesn't function well. Actually I have this problem with the homepage of my web site https://www.alessiarodler.com/

Thank you!

[Richard]

Dear @alessiarodler

I see on hover a colour change is occuring
As for "this Problem" i do not know what part is specifically the problem sorry,

Is it possible to show an example of an overlay effect that you desire?

As well as specifying the problem?

Let me know :)

Best wishes
Richard

[alessiarodler]

Dear @Richard-Keith

I wanted to put a background color while hovering on a linked image, I just managed to do it with project-thumbnails, but still don't know how to do it with simple linked images.
Here there is an example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_icon
(obviously I don't need the icon in my site)

Thank you very much for your feedback!

Alessia

[Richard]

Dear @alessiarodler

Ah yes! :)
You website is down right now i think?

So i cant relate it to something specific on your site but i can send you in the right direction:

So the "hover" function in CSS

https://www.w3schools.com/cssref/sel_hover.asp

You can target any element on a webpage and have something occur when you move the mouse cursor over that element "hover" over it.

So what is happening in
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_icon

Is they have a container that holds two boxes - an image and basically a box that holds a block color,
The image is visible but the Coloured box has an "opacity" of "0" meaning it is invisible, when the mouse cursor 'hovers' over the image, the box is given an "opacity" of "1" making it visible!

This is the basics behind the example you provided,

Let me know further

Best Wishes
Richard