How to flip an image on hover

This tutorial will show you how to flip an Image on hover on Squarespace. This code has been tested on Squarespace 7.1.

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

Complexity: Easy


Step 1

Insert an image block and from the design tab select the ‘Poster’ option

Make it stand out

Whatever it is, the way you tell your story online can make all the difference.


Step 2

Use the code to flip the image.

/*Card Flip*/
[Block ID] {
  //default settings
  .design-layout-poster {
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  //Image
  .design-layout-poster img{  
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 20px;
  }
  
  //Caption
  .design-layout-poster figcaption{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background: rgba(255, 99, 71, 1);
    border-radius: 20px;
  }

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

Step 3

Replace the [BLOCK ID] with the actual Image Block ID.

Change background colour “background: rgba(255, 99, 71, 1)” to your desired branding.

 


All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, 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, we recommend that you purchase the services of a developer.

Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous
Previous

How to create an infinite counter on Squarespace

Next
Next

How to create full width Map block