This tutorial will show you how to create a flipping image card effect in Squarespace.

A few important things to note before you copy and paste this into your own site:

→ This tutorial is for an image block in classic editor. Classic editor page sections, blog posts, events, and additional product details use this image block style, but Fluid Engine sections do not.

→ There is more than one way to do this! This is just one approach of many because code is super customizable. 

→ Be sure to edit the code to suit your own site style, trying different rotation styles and background colors.

→ This code is specifically for poster images. You will still be able to edit the poster image text after applying the code.

→ You can apply this to a single page! Check out this tutorial to see an overview of your code options.

→ You can apply this to a single image by using its block id. There is a free chrome extension that I use to easily grab that info, available here. Please note that I am NOT affiliated with that company or extension in anyway - I just use it myself!

→ If you need some help with this tutorial, feel free to submit an official help request here.

→ Mobile devices don't have a cursor so hover effects won’t work on them! This code only applies the look to any screen larger than 640px.

Here is the main code from this tutorial:

@media only screen and (min-width:640px){

.design-layout-poster img{ transition: 1s}

.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1s} 

.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;}

.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s;}}