Add image block overlay on hover

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!

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

My testing