Create a dark overlay (in Fluid Engine) over an image on hover with text stacked on top (CSS)

Hi there! 

I am having trouble adding a dark overlay hover effect on top of an image in Fluid Engine with text on top. I have managed to successfully  create the desired hover effect by using this code (and repeated for each of the image blocks I wanted to change):

/*Change Image to dark overlay on Hover*/

#block-e150a8e3f9e2afe9d0a0 .fluidImageOverlay { 
  background: #222222!important; 
  opacity: 0;
}

#block-e150a8e3f9e2afe9d0a0:hover .fluidImageOverlay {   
  background: #222222!important;
  opacity: .3;
  transition: .3s
}

however I also have text (and a link)  on top of the image which, when hovered (over any of the text boxes), doesn't change the image background to be the dark overlay. I've tried to target the text to create a similar hover effect but I've only gotten it to affect the text & text box rather than the whole image behind it. 

Here's an example of what I'm trying to achieve: https://www.ladybaguette.com/

My goal is to:

- mouse over the image card and show dark overlay hover effect (and allow the image to be clickable) - I've achieved this so far however open to changing my approach 

- mouse over the text on top of the image card to show the same hover effect on the image (dark overlay)

- mouse over the link on top of the image card to show the same hover effect on the image (dark overlay). 

- have all text & links show on top of the hover effect so it's still readable 

Any help on this would be much appreciated! Thanks! 

Hi,

Can you share link to your site? We can check easier

@tuanphan sorry! yes here's the site: sbleiweiss.design

On 11/21/2023 at 4:40 AM, smb7 said:

@tuanphan sorry! yes here's the site: sbleiweiss.design

Hi,

I see you solved it all?

@tuanphan No I didn't solve it yet - when you hover over the text the dark overlay goes away. I would like it so that whenever you hover over any of the text, the dark overlay stays. Can you help?