Show Text on Image

Yes, it’s possible on Squarespace — on both desktop and mobile. Just copy the code and paste it into your Custom CSS panel.

Step 1 - Prepare the section & images

1. Go to the page/section where you want the effect.

2. Add a List section and replace the placeholder images with your own.

3. Important: choose a simple list design — complex list styles or special gallery blocks may break the effect.

4. Whatever you want to show on screen (text, details, or descriptions) can be customized by editing the image title and description fields.
   

Step 2 - Copy the code

@media only screen and(min-width:640px){ .list-item-content { transform:rotateY(180deg); transition: all 1s; margin-top:-100%; padding-bottom:30%!important; padding:1rem; opacity:0; } .list-item:hover  .list-item-content { transition: all 1s; transform:rotateY(0deg); opacity:1; } .list-item-media img{ transform:rotateY(0deg); transition: all 1s; } .list-item:hover  .list-item-media img{ transition: all 1s; transform:rotateY(180deg); opacity:0 } .list-item:hover  .list-item-media{ transition: all 1s; transform:rotateY(180deg); background-color:#50bdb8 }}

Step 3 - Paste the code

Paste the CSS into Design → Custom CSS.

Step 4 - Customize the effect

• Adjust text, colors, fonts, or animations to match your style.

• You can also ask ChatGPT to help customize the code further.
  
  

Step 5 - Desktop vs Mobile note

• By default, the effect works only on screens larger than 650px (desktop).

• To make it work on mobile too, replace 650 in the code with 40.

Step 6 - Test your site

Check the effect on both desktop and mobile.