Jump to content

Add image block overlay on hover

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

9 hours ago, imanimek said:

Site URL: https://www.imanidavis.website/new-page-2

Hello, I am trying to add an overlay to the image blocks when someone hovers over it. 

The image block is an inline. I want the hover to only be around the actual the image, not the text. 

Any help would be greatly appreciated. Thank you!

Try adding to Home > Design > Custom Css

section[data-section-id="62e6e0479b6a2e48269ecc23"] {
	.sqs-block-image-link {
		.image-block-wrapper {
			&:after {
				background: rgba(0,0,0,0.5);
				opacity: 0;
				transition: opacity .2s linear;
			}
		}
		&:hover {
			.image-block-wrapper {
				&:after {
					opacity: 1;
				}
			}
		}
	}
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.69fc843166c917d541de6570ecd3dedd.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.