Image Flip Card Animation

What does this code do?

This code snippet will allow you to place the text and buttons of a poster image on the back of the card. This information will then show using a flip animation when the user hovers overtop of the card.

Note: If you would like to apply this animation to a Grid Gallery, click here.

Video Tutorial

Add Your Poster Image

Add an image block and upload you image. Choose the Poster Image Design and add your content. This code snippet will work with both text and buttons.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Flip Card Animation */
.sqs-block-image:hover .design-layout-poster {
  transform: rotateY(180deg);
}
.design-layout-poster {
  transition: transform 0.8s;
  transform-style: preserve-3d;

  .intrinsic,
  .image-card-wrapper {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .image-card-wrapper {
    background-color: black; /* background color */
    transform: rotateY(180deg);
  }
}

Then edit the background color of the image card.

How To Use It

1. Add your image and set it to the Poster design.

2. Copy and paste the code as indicated above.

3. Customize the background color.