Flip an Image on Hover

Flip a poster image to show a description on the back as you hover over it.

Demo

Image Card Flip Effect in Squarespace.

Will, Hippity Hop, and Ren at Joshua Tree.
Joshua Tree, Nov 2022

(Hover over the Image)

Usage

You need to use an Image Block with its design set to “Poster”. Paste the code below into the Custom CSS area of your website.

Apply this style to multiple blocks by separating each block-id with a comma.

Options

background: adjust the background color in the .design-layout-poster figcaption selector near the bottom of the CSS.
border-radius: If you have the border radius set on the image block, be sure to set a similar border-radius in the Custom CSS.

The Code

  
/*Card Flip Effect*/
#block-id{
  /* Default Setup */
  &.image-block .sqs-block-content{
    perspective: 2000px;
  }
  .design-layout-poster {
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  //Image
  .design-layout-poster .intrinsic{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  //Caption
  .design-layout-poster figcaption{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: hsla(0,0%,15%,1);

    //Add if needed
    //border-radius: 20px;
  }

  /*Hover Effect*/
  &.image-block:hover .design-layout-poster {
    transform: rotateY(180deg);
  }
}
  

References

This tutorial originated from a question by Larkin in the Squarespace Circle Forum.

The resulting code was tweaked from W3Schools to work for Squarespace Image Blocks.