To add masonry on Gallery Block with text/overlay on hover, you can do these.
#1. First, edit Gallery Block > Choose Grid layout
#2. Next, enable Show Title
#3. Next, upload some images to Gallery
#4. Hover on each image > Click Gear icon to add title text
#5. Add text to Title field
#6. Use this code to Custom CSS
/* Blog gallery */
:root {
--masonry-columns-mobile: 2;
--masonry-columns-desktop: 3;
--masonry-gap-mobile: 15px;
--masonry-gap-desktop: 25px;
}
.gallery-masonry .image-slide-title{position:absolute;top:0;left:0;width:100%;height:100%;background-color: rgba(255,255,255,0.9);margin:0px!important;display:flex!important;align-items:center;justify-content:center;color:#000!important;opacity:0;transition:all 0.3s ease;pointer-events:none;font-size:20px}.gallery-masonry .slide:hover .image-slide-title{opacity:1;transition:all 0.3s ease}
.gallery-masonry{animation:fadein 1s 0.15s backwards;display:block!important}.gallery-masonry .sqs-gallery{column-count:var(--masonry-columns-mobile)!important;column-gap:var(--masonry-gap-mobile)!important;column-fill:balance;padding:0 10px}.gallery-masonry .slide{margin-bottom:var(--masonry-gap-mobile)!important;break-inside:avoid;transition:all 0.3s ease;display:inline-block!important;width:100%!important;position:relative!important;box-sizing:border-box!important}.gallery-masonry .slide .margin-wrapper{position:relative!important;overflow:hidden;width:100%;margin:0;line-height:0;border-radius:8px}.gallery-masonry .slide img{width:100%!important;height:auto!important;display:block!important;position:static!important;object-fit:cover!important;left:0!important;top:0!important;transform:none!important}.gallery-masonry .slide .image-slide-anchor{display:block!important;position:relative!important;overflow:hidden!important;width:100%!important;height:auto!important;padding:unset!important}@keyframes fadein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (min-width:768px){.gallery-masonry .sqs-gallery{column-count:var(--masonry-columns-desktop)!important;column-gap:var(--masonry-gap-desktop)!important;padding:0 20px}.gallery-masonry .slide{margin-bottom:var(--masonry-gap-desktop)!important}}
#7. Hover on Page where you use Gallery Block > Click Gear icon
#8. Click Advanced > Paste code to right box
<script>
(function(){function initGalleryMasonry(container,options={}){container.classList.add('gallery-masonry');const gallery=container.querySelector('.sqs-gallery');const slides=[...container.querySelectorAll('.slide')];if(!gallery||slides.length===0)return;slides.forEach((slide,index)=>{const img=slide.querySelector('img');const anchor=slide.querySelector('.image-slide-anchor');const marginWrapper=slide.querySelector('.margin-wrapper');if(img&&anchor&&marginWrapper){slide.style.height='auto';slide.style.position='relative';slide.style.display='inline-block';slide.style.width='100%';slide.style.boxSizing='border-box';slide.style.breakInside='avoid';anchor.style.display='block';anchor.style.position='relative';anchor.style.overflow='hidden';anchor.style.width='100%';anchor.style.height='auto';img.style.position='static';img.style.width='100%';img.style.height='auto';img.style.objectFit='cover';img.style.display='block';img.style.left='0';img.style.top='0';img.style.transform='none';marginWrapper.style.position='relative';marginWrapper.style.overflow='hidden';marginWrapper.style.width='100%';marginWrapper.style.margin='0';marginWrapper.style.lineHeight='0';marginWrapper.style.borderRadius='8px'}
slide.style.animationDelay=(index*0.05)+'s'});if(options.shuffle){const shuffled=slides.sort(()=>Math.random()-0.5);shuffled.forEach(slide=>gallery.appendChild(slide))}
setTimeout(()=>{slides.forEach(slide=>{slide.style.opacity='1';slide.style.transform='translateY(0)'})},100)}
function initGalleryMasonryPlugin(options={}){const defaultOptions={shuffle:!1,selector:'.sqs-gallery-container, .gallery-block'};const config=Object.assign(defaultOptions,options);let containers=[];containers=[...document.querySelectorAll(config.selector)];containers.forEach(container=>{if(!container.classList.contains('gallery-masonry')){initGalleryMasonry(container,config)}})}
function domReady(callback){if(document.readyState==='interactive'||document.readyState==='complete'){callback()}else{document.addEventListener('DOMContentLoaded',callback)}}
function ajaxReady(callback){const ajaxBody=document.querySelector('body[data-ajax-loader]');if(ajaxBody){const observer=new MutationObserver(mutations=>{if(mutations[0].attributeName==='data-ajax-loader'&&ajaxBody.getAttribute('data-ajax-loader')==='loaded'){callback()}});observer.observe(ajaxBody,{attributes:!0})}else{window.addEventListener('mercury:load',callback)}}
function init(options={}){domReady(()=>initGalleryMasonryPlugin(options));ajaxReady(()=>initGalleryMasonryPlugin(options));window.addEventListener('load',()=>{setTimeout(()=>initGalleryMasonryPlugin(options),100)});window.addEventListener('resize',()=>{setTimeout(()=>initGalleryMasonryPlugin(options),200)})}
window.galleryMasonry={init};setTimeout(()=>{console.log('Gallery Masonry: Starting auto init...');init()},100)})()
</script>
#9. Result
#10. To change space between images, you can adjust this value.
