Gallery Grid: Flip Effect when users hover on image

To create a Flip Effect when users hover on each image in Gallery Grid, you can use this code to Website Tools > Custom CSS.

/* Gallery Grid Flip on Hover */
.gallery-grid-item {
    perspective: 1000px; /* Adds depth for the flip effect */
}

.gallery-grid-item .gallery-grid-item-wrapper {
    position: relative;
    transform-style: preserve-3d; /* Ensures the flipping effect is in 3D */
    transition: transform 0.6s; /* Controls the duration of the flip */
}

.gallery-grid-item:hover .gallery-grid-item-wrapper {
    transform: rotateY(180deg); /* Flip the image on the Y-axis */
}

/* Ensure the image stays on the front side */
.gallery-grid-item img {
    backface-visibility: hidden; /* Hides the back side of the image during the flip */
    display: block;
}

/* Style for the back side of the flip (optional) */
.gallery-grid-item .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg); /* This positions the back face */
    background-color: #f3f3f3; /* Background color for the back of the flip */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: black;
}