Sleek Masonry Gallery Section design in 7.1 with caption overlay and hover mode

[@adsausage-archives]

Very nice. I also never realized I could use tags in the gallery description, so that was new :)

[@beatrizecaraballo]

I appreciate that, thank you! And yes! That's a really sneaky trick that can be very useful for some projects 🙌

[@freddychavez6781]

Thank you for the tips B. Very nice!!

[@beatrizecaraballo]

Hey Freddy! I appreciate that, you're most welcome! ☺

[@mvelentzas]

This is awesome, please keep making these tutorials!

[@beatrizecaraballo]

Thank you! I'm thrilled to hear you enjoyed it. Will do ☺

[@manuelsaballa]

great tutorial, thanks

[@beatrizecaraballo]

I'm glad you liked it, thank you!

[@wawaheads]

Hi, a question, how can I have one image showing in mobile instead of two, and still keep 3 columns in desktop view. Thanks a lot!

[@beatrizecaraballo]

Oh, that's a really good question! I'll look into it an add it to my list of upcoming tutorials! 🙌

[@covch2184]

Excellent 😊

[@beatrizecaraballo]

Thanks so much! 🙌

[@ZeBigNagati]

Clear and simple, just what a non-programmer like myself needs! Many thanks for this! Just a question: why bother with the hover settings in mobile mode, since you can't really hover over an image in a phone or tablet?

[@beatrizecaraballo]

I'm glad to hear it! You're most welcome 🙌 I like to take care of that sort of thing because it may still show up in some situations where the element is pressed long enough, or right before redirecting to the clickthrough page. If the original desktop element doesn't have a hover effect then I don't worry about adding the equivalent tap mode for smaller devices. BUT, if I'm customizing the desktop version I like to take care of the mobile one too just because I feel that can provide a more consistent experience for visitors who may check out the site on different screen sizes.

[@TheLetterFifteen]

Thanks for the tutorial! For some reason the overlays aren't reaching the ends of the images when I enlarge the page, even though I have width at 100% and "box-sizing: border-box". Any idea how I could fix that?

[@beatrizecaraballo]

You're most welcome! 🙌 Ah yes, thanks for catching that! There's a max-width limit natively set for the .gallery-caption-grid-masonry element. It needs to be changed to 100% to make sure the overlay expands. I've modified the code in the post to reflect that, you can grab it from there! www.beatrizcaraballo.com/blog/masonry-gallery-section-overlay-caption-hover

[@TheLetterFifteen]

@@beatrizecaraballo Perfect, thanks so much!

[@josejoaofsantos]

Just started testing Squarespace for a new website and this just made my day!! :) I also figured out how to make the image go grayscale on hover (for example) instead of using the outline. If I may, I would like to make margin even smaller between the title and "description" but I have the "margin-bottom" already at zero. Any way I can make this?

[@josejoaofsantos]

And also, is it possible to make the legend appear only when hover?

[@beatrizecaraballo]

@@josejoaofsantos I'm happy to hear that! And really cool that you were able to set the image to grayscale on hover, love it 💪 As for the spacing, if you're working with a element for the description, it's likely it has some top margin, so you can use this to adjust it: .gallery-caption-grid-masonry p { margin-top: 0; } Then, to make the overlay/caption show up on hover, you can use something simple like this: .gallery-caption-grid-masonry { opacity: 0; transition: all .5s !important; } .gallery-masonry-item:hover .gallery-caption-grid-masonry { opacity: 1; } Feel free to adjust the .5s in the transition to modify the timing of the effect. Hope that helps!

[@josejoaofsantos]

@@beatrizecaraballo Thank you so much! Will try that asap. :)

[@trancer03]

Nice!

[@beatrizecaraballo]

Thank you!