Text Opacity Effect

Hi
I want to make an interaction On Hover, when I have a container with background image, I need the image to be darken, and a text to be appear on top of the darken image.
So far, i managed to darken the bg image, but it darks the text also.
Any suggestions…?
Thanks
https://webflow.com/design/beeart


Here is my public share link: LINK
(how to access public share link)

Can you share your read only link?

1 Like

https://preview.webflow.com/preview/beeart?utm_medium=preview_link&utm_source=designer&utm_content=beeart&preview=9697b277854bb4136d0f56e0d6c22ec9&mode=preview

Anyone…?
Anyone…?

@yannick - it looks like you’re just fading an image in on top of the background image at this point:

image

Div Block 11 has your background image and “Image” has some text with a semi-transparent yellow background?

What you could do instead is nest another div inside your element with the bg image, set it to position absolute and position the top, right, bottom, and left to be 0:

image

Then apply a background color to that div with some opacity, and set it to display flex and center all children:

image

Then place a text block inside of it:

image

Then just apply your interactions to these elements (i.e. fade them in on hover).

1 Like

WOW Thanks!
I didn’t see that way… I’ll try it!

OK so I just tried your way and its very close to what I need , BUT, in this way, the problem is that the TEXT interaction is applied only in the text block area, and what I want is hovering in any place on the DIV will apply the interactions on both part (bg and text).
I think i’ll stay with my PATCHED solution for now.
But you did gave me solution for other thing, so BIG THANKS!!!

@yannick - you can use interactions to effect other elements, not just the selected one. So in your case you would apply the interaction on hover to your parent div (with the bg image) and have it fade in both the child elements, the background and the text. The nice thing about that is you could create some more interesting effects, like staggering the fade in of the text to be slightly slower than the background color, etc…

1 Like