Remove overlay from image, while hovering over text on top of that image

I have a site with some images and text on top of them. Clicking either the text or the image will redirect to another page. Our goal is to remove the darkened overlay on the image while hovering over it. Currently it only removes the overlay while hovering over the image, not the text.

Not hovering over anything:

Hovering over image:

Hovering over text:

Guide to our sections/blocks:

Our relevant CSS code:

Setting up ease / fluidImageOverlay

#collection-65cbc46b7536936bd7fcd90c .fluidImageOverlay{
    /* Initial styles for the overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Overlay color with opacity */
    transition: opacity 0.3s ease; /* Transition effect for smoother hover */
}

Hovering removes overlay while on image

section[data-section-id="65cbd1bd43665304e86c4ee9"]{
  .sqs-block-image:hover
  .fluidImageOverlay{
    opacity: 0;
	}
}

The second chunk of code is what I've been working on. The fluidImageOverlay is only applied to the image blocks, so adding h3 or other text blocks to the code does not affect the fluidImageOverlay on image blocks. I tried writing this so that when hovering over text blocks, it set fluidImageOverlay to 0 on the image blocks, but couldn't get it to work. Any advice?

You need to set all text blocks to pointer-events: none;

e.g.

body:not(.sqs-edit-mode) .fe-block-yui_3_17_2_1_1707856363106_10388 {
	pointer-events: none;
}

You can get the FE class from dev tools or based on id. From there they won't be hovered, and you can work on image itself. Body:not thing allows to edit blocks in the editor, as you basically remove all mouse events from the block.

21 minutes ago, nick_sh said:

You need to set all text blocks to pointer-events: none;

e.g.

body:not(.sqs-edit-mode) .fe-block-yui_3_17_2_1_1707856363106_10388 {
	pointer-events: none;
}

You can get the FE class from dev tools or based on id. From there they won't be hovered, and you can work on image itself. Body:not thing allows to edit blocks in the editor, as you basically remove all mouse events from the block.

"pointer-events: none" seems to be working when applied to "#block-yui_3_17_2_1_1707856363106_10388" but it only removes the ability to click on the link.

"body:not(.sqs-edit-mode)" is not working. I can't get it to recognize any block.

This does nothing:

body:not(.sqs-edit-mode) #block-yui_3_17_2_1_1707856363106_10388{
	pointer-events: none;
}

This just removes the clickable link, but the text is still selectable:

#block-yui_3_17_2_1_1707856363106_10388{
	pointer-events: none;
}

Also, all FE blocks are not targetable for whatever reason. I have to use the other #block ids.

For example, 

fe-block{
	border: 5px solid red;
}

does nothing, while...

h3{
	border: 5px solid red;
}

...works as intended. Not sure if this problem is related.

3 hours ago, nick_sh said:

Here you need  dot before the class:

.fe-block{
	border: 5px solid red;
}

That was it! Needed a period lol. Final code that works (for each block):

.fe-block-yui_3_17_2_1_1707856363106_10388 {
 	pointer-events: none; 
}

I can still edit the blocks in Squarespace without the "body:not".

Okay, great, for some reason I though it might remove editing possibility 😅