Hover effect: low capacity black panel when I move my mouse on the image

Hi,
how can I make the image covered with low capacity black panel when I move my mouse on the image?
and when I leave my mouse from the image, the image becomes original one?

like this picture :

Each item make it position relative.
In each item, add another div, position absolute 0 0 0 0.
Set background color to 50% black.
Put your text content inside.
Set opacity of the div to 0.
Set hover state opacity to 1.

hi,
Thank you for your reply.
It’s very useful instruction and I have a further question about the effect.
In my cases, I applied this effect in my dynamic items and what I want is that the black panel “Only” covers my image, not on my title.
I attached my screenshot here.

Why don’t you put the title inside the overlay? Otherwise it will be more tricky as you need to use interactions.

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