Jump to content

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

Go to solution Solved by nick_sh,

Recommended Posts

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:

image.png.9aceded70af51bdcecba5b98facff34d.png

Hovering over image:

 image.png.65763f84df29f65fbe04527c372b5037.png

Hovering over text:

image.png.f0328b62184bc5f79bfa3eba1f4a0588.png

 

Guide to our sections/blocks:

image.thumb.png.4628dd126c30b586b71fcf5a20f60e81.png

 

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?

 

Edited by jjc1999
fixed image
Link to comment
  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Edited by nick_sh
Link to comment
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.

Link to comment
  • Solution

Re:body — I forgot to mention: you need to view with full screen editor (so no admin sidebar is visible → click on arrow in right top corner to expand) or incognito.

13 hours ago, jjc1999 said:
body:not(.sqs-edit-mode) #block-yui_3_17_2_1_1707856363106_10388{
	pointer-events: none;
}

This will do nothing because you need fluid engine class in your case. Because you make regular block unclickable, but fluid engine block remains. 

Try this code to see that actual :

.fe-block-yui_3_17_2_1_1707856363106_10388 {
 pointer-events: none; 
 border: 1px solid red;
}

 

Here you need  dot before the class:

.fe-block{
	border: 5px solid red;
}
Link to comment
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".

Edited by jjc1999
Link to comment

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.