Caption Overlay for Grid Gallery Block — Solution


I love Squarespace, I do. I've been using it for a couple of years now, and it's been a pleasure and a breeze. With my current website template (Five), which I took time to redesign to suit my blogging needs, I've only had one problem: not being able to display title captions over grid gallery blocks. After doing some extensive research on google and Squarespace forums, I came across a couple of decent CSS codes (because it lets you add custom CSS tidbits to your site), but some of them lacked the clean look I was going for, and others refused to display captions at all times, only showing them on hover. After a couple of hours of experimenting, I managed to crossbreed two caption overlay codes and create one that was just perfect for me.

I'm not going to tease you any longer, lest you are in amateur coding hell, as I was earlier this week. This is the code I came up with:

.sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: inherit; background-color: rgba(20,20,20,0.8); font-family: sans-serif, futura pt; font-size: 11px; text-transform: uppercase; letter-spacing:4px; color: #fff; opacity: 0; top: -18px; margin-bottom: -18px; opacity: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { opacity: 1; } @media only screen and (max-width: 1024px) { .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { opacity: 1; } }

I've been using it for Five template, but it should work just as well for other Squarespace themes.
If you have any suggestions or improvements to the code, feel free to comment below.  I love brainy solutions to my blog problems.

Thanks for reading,