How to Create a Shrink-on-Hover Effect with Fade In Text in Squarespace (CSS Included)

CSS
Written By Jessica Miller
 
blog post image of a green palm leaf on a sidewalk

Pin this post to Pinterest! ☝🏻

 

How to Create a Shrink-on-Hover Effect with Fade In Text in Squarespace (CSS Included)

If you’ve ever scrolled a website and hovered over an image that shrinks slightly, reveals a color overlay, and fades in text—you’ve probably thought: “Okay, that’s cool. I want that on my site.”

Hover over this image to see it in action:

 
sun shining on the beach with palm trees
 

When you hover over an image, here’s what happens:

  • The image gently scales down to 95% of its size

  • A semi-transparent color fades in over the entire image

  • Text (like a headline or project title) fades into view on top

GOOD NEWS: You can totally recreate this effect in Squarespace with just a little bit of CSS—no plugins, no code blocks, and no development experience required. AND! The same code works for both Classic Editor and Fluid Engine.

Let’s break down the steps:

Step 1: Set Up Your Image Block in Squarespace

Add an image block to your section and upload your photo.

If you’re using Fluid Engine, be sure to set it to “Fill” and not “Fit”.

Confused by CSS? Download this quick guide 👇

Featured
Beginner’s Guide to CSS

Step 2: Add the CSS

Go to Pages -> Website Tools -> Custom CSS and paste the following CSS.

When you first paste it into your Squarespace website, nothing will happen. We need to modify a few things so that it is custom to your website. Keep reading…

//shrink image on hover//
#block-yui_3_17_2_1_1744046449064_11236:hover{
  transform: scale(.95);
  cursor: pointer;
}

//image transformation after hover//
#block-yui_3_17_2_1_1744046449064_11236 {
  position: relative;
  overflow: hidden;
  transition: transform 1s ease;
  padding: 0px !important;
}

// Add color overlay and text //
#block-yui_3_17_2_1_1744046449064_11236::before {
  content: "Here is the first line \A And the second line";
  white-space: pre-wrap;
  position: absolute;
  inset: 0;
  background: rgba(75,113,123, .7);
  color: white;
  font-size: 1.5rem;
  font-family: 'arial';
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  text-align: center;
}

// Show overlay on hover //
#block-yui_3_17_2_1_1744046449064_11236:hover::before {
  opacity: 1;
}

// color overlay and text on mobile //
@media screen and (max-width:767px) {
#block-yui_3_17_2_1_1744046449064_11236::before {
  content: "Here is the first line \A And the second line";
  white-space: pre-wrap;
  position: absolute;
  inset: 0;
  background: rgba(75,113,123, .7);
  color: white;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 1;
  text-align: center;
}
}

There are 5 sections to the code above:

  1. The code to shrink the image

  2. The code to smoothly transition back to the natural state after the hover

  3. The text and color overlay

  4. The code to show the text and color overlay on a hover

  5. The code to show the text and color overlay on a mobile device

Step 3: MODIFY THE CODE TO YOUR WEBSITE

  • First, you’ll need to replace the block ID with your image block ID on your own website. To get the block ID, use the Chrome extension Squarespace ID finder (it’s free). Copy this image block ID and replace the existing block ID (starting with #) on all 5 sections of the code.

squarespace id finder with chrome extension

  • Next, adjust the text in the 3rd and 5th section of the code to your own text:
    content: "Here is the first line \A And the second line";
    In order to have multiple lines of text, use “\A” in between your sentences (you’ll see it in the code above).

  • Change the overlay color to your color in the 3rd and 5th section:
    background: rgba(75,113,123, .7);
    Only replace the first 3 numbers (75, 113, 123)…leave the “.7”. If you don’t know the RGB color, use this Hex to RBG converter. The “.7” determines the opacity of the color. Use a higher number (“1” is the max) to see the full color, or use a lower number to see more of the image.

Step 4: Customize the Look

Step 3 are the minimum things to change in order for it to work on your website. However, here are a few more customizations you can do if you want to experiment. These are optional:

  • SHRINK AMOUNT: Adjust the scale value to make it shrink more or less:
    transform: scale(.95);

  • TRANSITION TIMING: Adjust the transition seconds to make the transition slower or faster:
    transition: transform 1s ease;

  • TEXT STYLING: Edit the font size and color to make your headline more readable on top of the overlay:
    color: white;
    font-size: 1.5rem;

Featured
SEO Checklist

APPLYING THE CODE TO MULTIPLE IMAGES

It’s totally possible to add this code to more than one image. And no, you don’t have to copy/paste all 5 sections for each image! However, you WILL need to have a different section 3 and 5 for each individual image. Why? Because you’ll probably want the text (and possibly color) to be different for each image.

Here’s how mine looks when I apply it to 2 images (below). This exact code will not work on your website unless you modify the image block ID’s to YOUR ID’s (scroll back up to step 1).

You’ll see I have the same 5 sections as above, and I’ve added 2 new sections at the bottom that are specific to my 2nd image.

TIP: Notice how most sections (like, section 2) must have “:hover” added to BOTH block ID’s.

//image transformation after hover//
#block-yui_3_17_2_1_1744046449064_11236, #block-yui_3_17_2_1_1744055541291_12981{
  position: relative;
  overflow: hidden;
  transition: transform 1s ease;
  padding: 0px !important;
}

//shrink image on hover//
#block-yui_3_17_2_1_1744046449064_11236:hover , #block-yui_3_17_2_1_1744055541291_12981:hover {
  transform: scale(.95);
}

// Add color overlay and text to first image //
#block-yui_3_17_2_1_1744046449064_11236::before{
  content: "Here is the first image";
  white-space: pre-wrap;
  position: absolute;
  inset: 0;
  background: rgba(75,113,123, .7);
  color: white;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  text-align: center;
}

// Show overlay on hover //
#block-yui_3_17_2_1_1744046449064_11236:hover::before, #block-yui_3_17_2_1_1744055541291_12981:hover::before {
  opacity: 1;
}

// color overlay and text on mobile for first image//
@media screen and (max-width:767px) {
#block-yui_3_17_2_1_1744046449064_11236::before {
  content: "Here is the first line \A And the second line";
  white-space: pre-wrap;
  position: absolute;
  inset: 0;
  background: rgba(75,113,123, .7);
  color: white;
  font-size: 1.5rem;
  font-family: 'arial';
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 1;
  text-align: center;
}
}

// Add color overlay and text for 2nd image//
#block-yui_3_17_2_1_1744055541291_12981::before {
  content: "Here is the second image";
  white-space: pre-wrap;
  position: absolute;
  inset: 0;
  background: rgba(75,113,123, .7);
  color: white;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  text-align: center;
}

// color overlay and text on mobile for 2nd image //
@media screen and (max-width:767px) {
#block-yui_3_17_2_1_1744055541291_12981::before {
  content: "Here is the second image";
  white-space: pre-wrap;
  position: absolute;
  inset: 0;
  background: rgba(75,113,123, .7);
  color: white;
  font-size: 1.5rem;
  font-family: 'arial';
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 1;
  text-align: center;
}
}

TROUBLESHOOTING

Because there are a lot of things you can adjust in this code, the chances of a character being left out are high! If your code isn’t working, check these things first:

  • If you’re using Fluid Engine, be sure your image is set to “Fill” and NOT “Fit”

  • Compare your code to the original code at the beginning of this post and make sure every character is there. Each line should always end with a semi colon.

  • Make sure when you pasted in the block ID that you didn’t accidentally remove a colon after the ID (like, #block-yui_3_17_2_1_1744046449064_11236:hover)

Final Thoughts

This shrink-on-hover effect with a color overlay and text reveal adds a modern, interactive vibe to any Squarespace site. It’s clean, minimal, and super flexible.

If you give it a try, I’d love to see how you’ve used it! Drop a link in the comments or reach out if you need help customizing it for your site.

*This post may contain affiliate links, so I may earn a small commission when you make a purchase through links on this site at no additional cost to you.

 
 
CTA graphics for summary blocks
YOUR DESIGNER

Hey, I'm Jessica - a Squarespace website designer with over a decade of experience. I've helped countless entrepreneurs and small businesses launch successful websites that captivate audiences and drive conversions. If you’d like to discuss a potential project, you can email me, fill out the contact form, or book a free 30 minute call.

Jessica Miller
Next

Brand Strategy: Why A Website Is More Than Just Images And Text