Reveal Text on Hover in Squarespace Fluid Engine

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

This tutorial will teach you how to create a hover effect that shows text when you hover over an image. It’s for the latest version of Squarespace, but if you are using an older version, or you want this effect in a blog post, check out this tutorial.

There are five main steps to this tutorial:

Step 1: Add the image

Step 2: Add the text

Step 3: Grab the text block ID

Step 4: Customize the code below

Step 5: Edit the mobile view, because there is no cursor on a hover, so we need to make this view look great!

Here is the chrome extension I mention in the video. I am not associated with it or its creators, just a fan.

---

Here is the code tutorial.
Be sure to change up the block ID so it’s the same one as your text block, and feel free to change the transition timing!

@media only screen and (min-width: 640px){
#block-12345 {
opacity: 0;
transition: opacity 1s
}

#block-12345:hover {
opacity: 1;
transition: opacity 1s
}
}