Jump to content

Add image block overlay on hover

Recommended Posts

  • Replies 2
  • Views 241
  • 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.