How to reveal text on hover in Squarespace Fluid Engine
The Squarespace Fluid Engine opens up a world of layout flexibility, allowing you to design with more creativity than ever before. One of the most eye-catching interactive effects you can add is the "reveal on hover" animation—perfect for portfolio pieces, team bios, service highlights, and more.
In this tutorial, you’ll learn how to reveal hidden text when a user hovers over an image or block—no plugins needed, just custom CSS.This tutorial is specific to Squarespace version 7.1 using Fluid Engine.
Table of Contents
Why Use a Hover Reveal Effect?
Add interactivity to static designs
Keep layouts clean and minimal
Engage visitors through subtle animation
Ideal for showcasing descriptions, titles, or CTA buttons
Complexity: Easy
Step-by-Step Instructions
Step 1
Add the image to the page, click on the design tab, and select the fill option to fully occupy the image box and allow for responsiveness on mobile devices.
Step 2
Add the text block over the image block. Align the text so that it sits central to the image.
Step 3
Obtain the text block ID.
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.
Step 4
From your Squarespace account, go to Pages > Custom Code > Custom CSS and paste the code into the Custom CSS editor box.
The code below reveals the text on hover on desktop, however, hides the text on mobile devices.
@media only screen and (min-width: 640px){
[#blockID] {
opacity: 0;
transition: opacity 1.5s
}
[#blockID]:hover {
opacity: 1;
transition: opacity 1.5s
}
}
@media only screen and (max-width: 640px){
[#blockID] {
display:none;
}
}Step 5
As there is no cursor on hover on mobile, we have made the text not visible on mobile devices. However, we still need to make the mobile view look presentable.
Key Takeaways
Use Fluid Engine’s drag-and-drop flexibility to layer blocks
Overlay the text on top of the image
You can customize transition speed
FAQs
Can I use this effect on mobile?
Hover doesn’t work the same on mobile. You can choose to have the text always visible on smaller screens by modifying the CSS with a media query.
Can I add multiple hover areas in one section?
Yes! and it will work independently.
Conclusion
Hover-reveal effects are a simple way to add interaction and polish to your Squarespace Fluid Engine layouts. With just a few lines of CSS, you can create dynamic visuals that enhance engagement without cluttering your design.
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.
