Combining overlays and masonry

1 reply·opened Sep 26, 2020
D
DavegdrSep 26, 2020

I'm trying to combine overlays and masonry thumbs but no success ....

				<div class="masonry-thumbs grid-6 grid-container mb-5" data-big="3" data-lightbox="gallery">
					<a class="grid-item" href="......" data-lightbox="gallery-item" title="....">
					<img class="image_fade" src="...." alt="....">
					</a>
					
-WHAT CODE TO ENTER FOR AN OVERLAY?-

				</div>
S
SemiColonWebSTAFFSep 26, 2020

Hello,

Consider using this HTML Code:

<div class="masonry-thumbs grid-container grid-6" data-lightbox="gallery">
	<a class="grid-item" href="..." data-lightbox="gallery-item">
		<div class="grid-inner">
			<img src="..." alt="Gallery Image">
			<div class="bg-overlay">
				<div class="bg-overlay-content dark">
					<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
				</div>
				<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
			</div>
		</div>
	</a>

	...

</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard