Squarespace Hover Text Over Image | Squarespace 7.1 Image Hover Effect | Reveal Image on Hover in Squarespace (Fluid Engine)

In this tutorial, I will guide you about Squarespace hover text over an image. This method is only applicable to websites designed using Fluid Engine. Whether you want to highlight product details, showcase captions, or simply add a touch of magic to your site, this blog post will make it easy—even if you’re brand new to CSS.

Step 1: Add Image Block

• Enter Edit Mode on your Squarespace page where you would like to add Image block.

• Now go to your desired section and add a new Image Block. Upload an image from your computer, select from your site’s library, or use Squarespace’s integrated Unsplash or Getty Images options.

Step 2: Add and Style Your Text Block

• Now, add a Text Block directly on top of the image.

• Enter reveal text (e.g., “Text Block is Over Image” or whatever you would like to add).

• Now save it.

To apply custom CSS, find the block ID of your text block. For this you may get help of a Chrome Extension (such as “Squarespace ID Finder”) to easily grab the block ID of the text block you want to target.

Step 4: Add Custom CSS for the Hover Effect

• To add custom CSS, go to website tab >> Pages>Scroll down and expand Custom Code>> Custom CSS.

@media only screen and (min-width: 640px) { #Your-Block-ID { opacity: 0; transition: opacity 1s } #Your-Block-ID:hover { opacity: 1; transition: opacity 1s } }

//In my Case, it is :

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

• Transition speed: Adjust transition speed as needed (e.g., 0.5s for faster or 3s for slower fade). Now, when users hover over the image, the text will smoothly fade in!

Step 5: Optimize for Mobile Devices

• No hover on mobile: Hover effect does not work on mobile devices.
• Edit the mobile layout: In mobile view, adjust the order and size of your blocks so both the image and text are clearly visible, even without hover.

Step 6: Save and Preview Your Changes

• Click “Save” to apply your changes.
  
• Preview your site on both desktop and mobile to ensure everything is perfect as your requirements.

How to Apply to Multiple Blocks

If you want to add this effect on several images? Add each block ID to your CSS, separated by commas. For Example;

• Click “Save” to apply your changes.

• Preview your site on both desktop and mobile to ensure everything is perfect according to your requirements.

@media only screen and (min-width: 640px) { #Your-Block-ID, #Your-2nd-Block-ID, #Your-3rd-Block-ID { opacity: 0; transition: opacity 1s } #Your-Block-ID:hover { opacity: 1; transition: opacity 1s } }