Make the title of your Overlap Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!

Make the subtitle text of your Overlap Image Blocks fully custom with this short snippet. Set its font family and add in any other font styles you like, by including or removing CSS properties from the code!

Set up an alternative image on hover mode for Overlap Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.

Let’s take a look at another cool way you can use code in your client designs to make things look more, for a lack of a better word, “editorial” using the Overlap Image Block.

Today we’ll be tackling an issue that becomes particularly annoying when for some reason card, overlap, and collage blocks make it really hard to vertically align your content to the center of the image… completely ignoring your Site Style settings.

You’ve probably seen inspirational websites on Pinterest *cough* Showit sites *cough* that include images with overlapping titles or phrases, that look slightly tilted. In Squarespace, you can absolutely achieve that look by simply adding the text to the image itself, but let’s see if we can achieve it without relying on Photoshop…

If you’re into overlapping stuff in your client sites, I know you’re going to really enjoy today’s fun tutorial. It’s all about taking the overlap image block design one step further, with very little code, to create a look I’m 90% sure you’ve seen before while perusing Pinterest: an image with an overlapping title, a secondary title, text and an overlapping button.