Flip an Image on Hover

Jan 4

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

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.

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);
  }
}
  