How to reveal text on hover in Squarespace Fluid Engine
This tutorial will show you how to create a hover effect that shows some text when you mouseover an image. Adding interactivity to your website is a great way to keep users engaged and on your site for longer. This tutorial is specific to Squarespace version 7.1 using Fluid Engine.
Complexity: Easy
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 (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.
Step 4
From your Squarespace account, go to the Custom CSS Editor. 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.
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, express 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.
