How to Reveal Text on Hover on Squarespace
Learn how to reveal text using a super cool and super easy css hover effect. (Can you tell I have Superman 2025 on my mind?)
Image of text that says “How to Reveal Text on Hover on Squarespace” with designwithabby.com
This is one of my favorite ways to subtly make your Squarespace website stand out in the crowd.
Why?
Because revealing text on hover is not only a great way to add some visual interest without overwhelming your design, but it also can look super cool if you pair it with transitional effects.
Plus there’s practical applications too. You can use it to show extra info, highlight details, or guide visitors to click.
In this tutorial, you’ll learn how to reveal text on hover using custom CSS in Squarespace. No plugins!
Before we get into it, if you’d prefer to watch and learn then click the video below! And you can check out other cool tutorials and educational videos on my channel. :)
Learn how to reveal text on hover css effect for Squarespace
-
[00:00:00.00]
Hey, everyone. This is how to reveal text on hover in Squarespace. So right now, I am in a demo website. And what we want to do is we want to add text over this image, but only let it show when you hover the mouse or the cursor over it, right? Because for the rest of the time, we just want the image to show. So if we add a text block here and we make it the same exact the size as the image. I'm just going to put some filler text, our team of experts, something like that. Then I'm going to make it white, and I think I want to make it fold a little bit bigger. Let's center it. Let's also align it into the center. And then let's add a background color, and we'll do red. It matches the header here. So now we have the text over top of the image, but we need to add some CSS so that way it appears only on hover. So if we click Exit, And then what we're going to do is scroll down to the bottom of our CSS, because I already have some in there from a past tutorial.
[00:01:23.10]
I'm going to just go over here and get the code, which you'll be able to find this in the description, and I'm We're going to copy and paste it in there. So here is our code. What this is doing is at the top here, we have what's called a media query, which means that it is restricting this effect to screens that are larger than 640 pixels. And obviously that would include desktop, stuff like that, but not mobile, because mobile doesn't have the capability to do hover effects because you're just using your finger to touch. So right now, it's not doing anything because we're not targeting that block. So I'm going to use this extension. You can find it on the Chrome Store. I'm going to copy this, which is the block ID for the text, and then I'm going to paste it here and replace the example block. As you can see, it already did something. But I'm going to also do this here, here, basically anywhere that I see the example block. So now what we have is the image shown. Then when we go over it, we can see the hover effect, which is awesome.
[00:02:39.10]
So just to explain a little bit further, we have Opacity, which is zero. So this is the So we have a 4 CSS here or the code here, or the code here. And then this is the after code, which makes the hover effect, right? So right now it is zero. And if we were to do 0. 5, then you can see it's showing about 50%, but we don't want that because we want it to be fully affected. So we have zero. We also have the transition, Opacity, Speed, basically. So if we were to change this to three seconds, then it takes a long time to disappear. As you can see, go back to it, take it away, and it's taken forever. So we're going to make this 0. 5. And then if we go back here, or go down here to the after code, basically. We have the hover. It's affecting it on hover. We have focus, which basically just means that when you have the focus selector. So if you have the focus selector there, what it means is that when someone's tabbing through with the keyboard or something, the text will show and that helps with accessibility and stuff, just to make sure that people that don't have a mouse can still see it revealed.
[00:04:07.11]
Then we have the result opacity down here, which would be, as you can see, you cannot see through it at all. If you were to change this to 0. 5, which means that right now it's at zero, and then when you hover over, it's only 50% view coming through. I personally think it looks good at 0. 9 because then you can see just slightly the image underneath. Then we have the speed, obviously. If you were to raise this up to eight and hover over, it's going to take forever to appear. I'm going to take that back down to 0. 5. That's basically it for that. But we want to make sure... I'm going to just save it real quick. We want to make sure that we're always checking the mobile view because as you can see, it doesn't quite give the same effect here because it's going to put your text beneath the image. And so you can either choose to leave it like this. You If you wanted to do a couple of different things. If you wanted to make it into a box and then just put it right on the image. If you wanted to do that, you could.
[00:05:23.23]
You can move it down, you can move it up. It doesn't really matter. You can put it wherever you want to the side. But let's just say I put it here. I don't know. Let's move this down and then put that there. If we go back to the desktop view, and as you can see, it works perfectly. Looks good. There's one other thing I want to show you, and that's to just get rid of it entirely just on mobile in case you just don't even want this to show at all. If we go back to desktop, obviously, we can see that it's still doing its thing. But if we wanted to add a little bit more code, then what we're going to do is come down, and I'm going to have this also available in the description. But we're going to hide this. And what it means is that we also... Okay, so I just pasted it in there. And then, as you can see, we have another media query. But what it's doing this time is it's doing max_with, which means screen's smaller than 640, it's going to be affected. If we again grab our block ID here, copy this, replace the block here, and then As you can see, it says display_none.
[00:06:47.12]
If we go back to mobile view, it has completely hidden the text itself. Obviously, it's not going to show the effect anyway, but Now it's hidden the text, so you wouldn't have to worry about seeing that on mobile. So here it works perfectly, and here it's gone. Obviously, you can just get rid of this if you wanted it to show back up. So that is how you do reveal text hover effects on Squarespace. Go ahead and like this video if you learn something new. And if you want to see more tutorials like this teaching you how to do different things on Squarespace, whether it's tips, code stuff, design, who knows? But you won't if you don't subscribe. So go ahead and hit that button. And also, if you're someone who's trying to build a website, maybe you want a Squarespace website or maybe you don't even know what you want, that's okay. You can go to designwithabby.com. You can book a call with me. We'll talk about your needs, what it is that you are hoping to get in a website, what it is that you need in a website to grow your business, and so much more.
[00:07:55.20]
So go ahead, go to designwithabby.com, like I said, or you can send me an email, reach out to me, or you can even DM me on Instagram. I don't care. Whatever is easiest for you.
Why Use Hover Reveal Effects?
Hover effects are subtle but can they let you keep your design clean while still offering interactive elements.
This is especially useful if you want to hide things like extra descriptions or tips and stuff.
If you didn’t know, hover effects don’t work on mobile since there’s no mouse. So while this is a great desktop interaction, you’ll need to rethink ways to stand out on phones and tablets. *sad face*
Step 1: Add Your Image and Text Blocks
Start by placing an image block on your page. This is the element people will hover over.
Next, add a text block. You’ll layer this over the image using Squarespace’s Fluid Engine editor. (Thank goodness for Fluid Engine imma right?)
Then, use drag and drop to get it right on top of the image. This is the text you want to appear when someone hovers.
Step 2: Find the Text Block ID
Every block in Squarespace has a unique ID, and you’ll need that to target your text in CSS.
Here’s how to get it:
Use Chrome’s Inspect tool or a browser extension like Squarespace ID Finder
Look for something like #block-a1b2c3 – that’s the ID for your text block
Copy it or write it down so you can use it in the next step.
Ready to work with a designer to get an awesome, high-converting website? Book a call and let’s chat!
Step 3: Add Custom CSS to Reveal Text
Now you’re ready to write the code. Go to Pages > Custom CSS in your Squarespace dashboard.
Paste the following CSS, but make sure to replace #block-a1b2c3 with your actual text block ID:
@media only screen and (min-width: 640px){
#block-a1b2c3 {
opacity: 0;
transition: opacity 1s;
}
#block-a1b2c3:hover,
#block-a1b2c3:focus,
.sqs-block-image:hover + #block-abc123 {
opacity: 1;
transition: opacity 1s;
}
}
What the :focus part does
The :focus selector means the text will also appear if someone tabs to it using their keyboard.
This helps with accessibility, making sure people who navigate without a mouse can still reveal the content.
Step 4: Customize the Look and Feel
Once the reveal effect is working, you can fine-tune it to match your site’s design. Try adjusting things like:
Transition speed
Change transition: opacity 1s to something faster (like 0.3s) or slower (like 1.5s) depending on the vibe you want.
Font size or style
You can style the text block however you like—change the font, size, color, background, or alignment right inside the Squarespace editor.
Add more effects
Want the text to fade in and slide up?
You can add transform properties for that:
#block-a1b2c3 {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
#block-a1b2c3:hover,
.sqs-block-image:hover + #block-a1b2c3 {
opacity: 1;
transform: translateY(0);
}
Step 5: Test Responsiveness
Since we know that hover effects don’t work on mobile, you either need to fix it so that way it appears how you like in the mobile editor or we can hide it completely.
So, edit it in the mobile editor.
Move it, stretch it, layer it, etc.
Or hide it entirely on mobile
If the effect isn’t useful without hover, you might want to hide the text on smaller screens:
@media only screen and (max-width: 640px){
#block-a1b2c3 {
display: none;
}
}
Pro Tips
If you want to use this effect on more than one text block, just repeat the process and use each block’s unique ID.
Use !important carefully. Only add it when Squarespace’s default styling is overriding your custom code.
Summary
So, if you followed along with this tutorial and have the effect that you want, then you know that revealing text on hover in Squarespace is a simple way to add interaction and polish to your site!
All it takes is some strategic layering and a bit of CSS. Whether you’re showing:
Extra info
Creating a cool hover message
Or just adding a design detail
This technique works well across most websites!
Plus, the good news is it’s also flexible—once you understand how it works, you can tweak it as much as you want.
Want help customizing your hover effects or building out a full Squarespace site that feels custom but stays easy to manage? 👇
Abby Castillo
Let’s Connect
Check out more step-by-step tutorials!
Subscribe to my YouTube channel @designwithabby for easy-to-follow Squarespace tips, design walkthroughs, and CSS learning.
Want more tips and inspiration?
Follow me on Instagram, Facebook, or LinkedIn for behind-the-scenes content, educational content, and design advice that actually helps.
Need a pro to handle your website?
Whether you're starting from scratch or need a refresh, I offer custom Squarespace design services to help your business stand out online. Get in touch here to book a free discovery call and see if we’re a good fit!
Or view my portfolio to see how I’ve helped others. :)
Frequently Asked Questions
-
Not natively. Squarespace doesn't offer a built-in hover-to-reveal feature for text, so you'll need to use custom CSS or a third-party extension. The CSS method gives you more control and doesn’t require any plugins.
-
No, hover effects don’t work on mobile because there's no cursor. On mobile, the text will either need to be visible by default or styled separately using media queries.
-
You can use your browser’s Inspect tool or a Chrome extension like Squarespace ID Finder to locate the unique ID of any block (e.g., #block-a1b2c3). You’ll need this to target the block with your CSS.
-
Yes. If your text block is layered over or under an image in Squarespace’s Fluid Engine, you can trigger the hover effect using an adjacent selector like .sqs-block-image:hover + #block-a1b2c3.
-
Absolutely. In your CSS, you can combine opacity, transform, or transition properties to create fade-ins, slides, or other motion effects. It’s fully customizable based on your design needs.
