How to create a disappearing overlay on a square-space image gallery

Site URL: https://www.johanneswarnke.com/press

I want an overlay of the vogue logo and white background to cover this gallery and then, on mouse hover, to disappear to reveal the image gallery - does anyone know how I would achieve this?

best,
liam

2 hours ago, Herculiam said:

Site URL: https://www.johanneswarnke.com/press

I want an overlay of the vogue logo and white background to cover this gallery and then, on mouse hover, to disappear to reveal the image gallery - does anyone know how I would achieve this?

best,
liam

You can try adding to Home > Design> Custom Css

/*setting hover overlay for gallery -- start*/
section[data-section-id="619fda0177250e49b8b8b30c"] .gallery-reel-item  .gallery-reel-item-src:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	transition: opacity 1s ease;
	background: url('https://images.unsplash.com/photo-1638064867432-8d3e00905d6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=436&q=80');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 1;
}

section[data-section-id="619fda0177250e49b8b8b30c"] .gallery-reel-item:hover  .gallery-reel-item-src:after {
	opacity: 0;
}
/*setting hover overlay for gallery -- end*/

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result with my image

That looks great! I just copied and pasted this code into my custom CSS and it doesn't seem to work.

Also, I see the overlay's are on each individual image - would there be a way to just have this overlay on the entire gallery as just one overlay?

Thanks