tuanphan Posted September 30 Share Posted September 30 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; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment