Jump to content

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

Recommended Posts

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! 

Link to comment
  • Replies 4
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.