Jump to content

[Share] Gallery Grid: Flip Effect when users hover on image

Recommended Posts

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

image.thumb.png.bcb239bddcaba4d98fb3532b98cf02c4.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 409
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.