In this tutorial I am going to show you how to use custom CSS to rotate an image title in your Squarespace website.

We are going to do this using the transform property and then specifying the number of degrees you want your text to rotate.

Pro tip: You can use negative numbers too! The base code here works for all image titles, but you can specify by image type, or isolate an individual image using it’s block id.

Here is a link to the chrome extension I use to easily find block ID’s in Squarespace. *Please note I am not affiliated with them in any way, I just use this extension in my own work!

Be sure to watch the tutorial to see how these values work in Squarespace so you’ll know what to change when you place them on your own site.

Here is the main code from the tutorial:

Change up the 15 in 15deg to the degrees you want your title to rotate:

.image-title {transform:rotate(15deg)}

If you are trying to target a specific image with a block id, add that block id before the text .sqs-block-image like this:

#block-yui-123456789 .image-title {transform:rotate(15deg)}

Want to apply this code to a specific image type?
At the start of the code, add the text to isolate a single design like this example for a poster image:

.design-layout-poster .image-title {transform:rotate(15deg)}