Streaming live at 10am (PST)

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


#1

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 :


#2

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.


#3

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.


#4

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


#5

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