Jump to content

smb7

Member
  • Posts

    3
  • Joined

  • Last visited

smb7's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. @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?
  2. 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!
×
×
  • 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.