How to flip an image on hover
Adding interactive effects to your website helps capture attention and encourage user engagement. One simple yet stylish effect is the image flip on hover—perfect for portfolio galleries, team bios, before/after images, or product showcases.
In this blog, you'll learn exactly how to flip an image on hover in Squarespace, giving your site a polished, modern feel without needing any plugins or third-party tools. This code has been tested on Squarespace 7.1 not Squarespace 7.1 FE.
Table of Contents
Why Use an Image Flip Effect?
Image flipping adds a touch of interactivity without overwhelming your page. Here’s why it works:
Increased Engagement – Encourages users to hover and explore your content.
Sleek Transitions – Smooth flipping feels professional and responsive.
Dual Content Display – Show one image on the front (e.g., logo, photo) and another on the back (e.g., info, alternate view).
Great for Portfolios and Teams – Flip from a headshot to a name or role, or from product to specs.
A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder.
Complexity: Easy
Step-by-Step Instructions
Step 1
Insert an image block and from the design tab select the ‘Poster’ option
Make it stand out
Whatever it is, the way you tell your story online can make all the difference.
Step 2
To use the code below to flip the image. Simply add the following CSS, go to ‘Pages > Custom Code > Custom CSS’, and paste the code into the Custom CSS editor box.
/*Card Flip*/
[Block ID] {
//default settings
.design-layout-poster {
position: relative;
transition: transform 0.8s;
transform-style: preserve-3d;
}
//Image
.design-layout-poster img{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 20px;
}
//Caption
.design-layout-poster figcaption{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateY(180deg);
background: rgba(255, 99, 71, 1);
border-radius: 20px;
}
/*Hover Effect*/
&.image-block:hover .design-layout-poster {
transform: rotateY(180deg);
}
}Step 3
Replace the [BLOCK ID] with the actual Image Block ID.
Change background colour “background: rgba(255, 99, 71, 1)” to your desired branding.
Key Takeaways
The flip effect works using CSS 3D transforms.
You can flip horizontally (rotateY) or vertically (rotateX).
Ideal for portfolio sections, teams, and product displays.
FAQs
Can I flip vertically instead of horizontally?
Yes! Just change this line in the CSS: transform: rotateY(180deg); to: transform: rotateX(180deg);
Will this work on mobile?
It works, but hover doesn’t behave the same on touchscreens. You may want to test usability and consider alternate mobile styling.
Conclusion
Flipping images on hover is a clean and modern way to add interactivity to your Squarespace website. Whether you're showcasing people, products, or visuals, this effect draws attention and makes your site feel more engaging. With a bit of CSS, you can achieve a smooth, professional flip effect in minutes.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
