How to rotate an image title in Squarespace 7.1

This tutorial will show you how to rotate an image title using custom CSS in your Squarespace website. This may be particularly useful if you wish to improve the appearance of your website.

Complexity: Easy

---

Simply use the code below to rotate the image title

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

Here we use the transform property and then specify the degrees the text is to be rotated. Here we specified 10deg, you want to use 20deg or -10deg (which will render the image image anti clock wise).

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxxxx"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.

Lavender Fields

Somewhere in the UK

Lavender Fields

Somewhere in the UK

Lavender Fields

Somewhere in the UK.

Lavender Fields

Somewhere in the UK

---

To apply to all the images on a page

#collection-id .image-title {

transform:rotate(10deg)

}

To apply to all the images on a section

#collection-id {

#page .page-section:nth-of-type(1) {

.image-title {

transform:rotate(10deg)

}

}

}

To apply to an individual image

#block-id .image-title {

transform:rotate(10deg)

}

If you wish to apply this to a specific image type then use the code below.

image card -> .design-layout-card.image-title {transform:rotate(10deg)}
image poster -> .design-layout-poster.image-title {transform:rotate(10deg)}
image overlap -> .design-layout-overlap.image-title {transform:rotate(10deg)}
image collage -> .design-layout-collage.image-title {transform:rotate(10deg)}

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.