Flip Card Animation for a Gallery

What does this code do?

This code snippet will allow you to place the image captions in a Gallery Grid: Simple section on the back of the images. This information will then show using a flip animation when the user hovers overtop of each image.

Note: If you would like to apply this animation to a single image, click here.

Video Tutorial

Add the Gallery

Add a gallery section and set the layout to Grid: Simple. Then add your images and captions. If you would like to add links in your caption, try this code snippet.

Code Snippets

Copy and paste this code into Design > Custom CSS.

/* Flip Card Animation for Grid Gallery */
.gallery-grid-item:hover {
  transform: rotateY(180deg);
}

.gallery-grid-item {
  transition: transform 0.8s;
  transform-style: preserve-3d;

  .gallery-grid-item-wrapper,
  .gallery-caption {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .gallery-caption {
    position: absolute;
    top: 0;
    left: 0;
    background-color: black; /* background color */
    height: 100%;
    padding: 0;
    transform: rotateY(180deg);
  }
  .gallery-caption-wrapper {
    display: flex;
    align-items: center; /* center caption vertically */
    justify-content: center; /* center caption horizontally */
  }
  .gallery-caption-content {
    font-size: 1rem !important; /* caption font size */
    color: white; /*caption font color */
  }
}

Then edit the background color, the caption placement, and the caption font size and color.

How To Use It

1. Add your images to a Grid Gallery.

2. Copy and paste the code as indicated above.

3. Customize the background color, the caption placement, and the caption font size and color.