In today’s tutorial, I will share a code snippet that adds a button text overlay on hover to your Squarespace portfolio grid. This method uses both JavaScript and CSS to create a smooth hover effect that reveals text and an icon when users interact with the images in your portfolio grid.

The text in the code snippet below is “View Project” but you can customize it with your own text. This snippet works on the Squarespace portfolio pages set to Simple Grid.

Follow along to implement this on your site:

How to Add a Text Overlay to your Squarespace Portfolio

1. Add the JavaScript

Go to Website >Pages > Website Tools > Code Injection
Add this script to the Footer Injection:
Change exploreText.textContent in the JavaScript snippet to edit the overlay text.


<script>
document.addEventListener("DOMContentLoaded", function () {
  var gridItems = document.querySelectorAll(".grid-image");
  gridItems.forEach(function (item) {
    // Create explore overlay
    var exploreOverlay = document.createElement("div");
    exploreOverlay.classList.add("explore-overlay");

    // Create explore text
    var exploreText = document.createElement("span");
    exploreText.classList.add("explore-text");
    exploreText.textContent = "View Project";

    // Create SVG icon
    var exploreIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    exploreIcon.setAttribute("width", "24");
    exploreIcon.setAttribute("height", "24");
    exploreIcon.setAttribute("viewBox", "0 0 24 24");
    exploreIcon.setAttribute("fill", "none");
    exploreIcon.setAttribute("stroke", "currentColor");
    exploreIcon.setAttribute("stroke-width", "2");
    exploreIcon.setAttribute("stroke-linecap", "round");
    exploreIcon.setAttribute("stroke-linejoin", "round");
    exploreIcon.classList.add("explore-icon");

    // Create SVG path elements
    var line = document.createElementNS("http://www.w3.org/2000/svg", "line");
    line.setAttribute("x1", "5");
    line.setAttribute("y1", "12");
    line.setAttribute("x2", "19");
    line.setAttribute("y2", "12");

    var polyline = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
    polyline.setAttribute("points", "12 5 19 12 12 19");

    exploreIcon.appendChild(line);
    exploreIcon.appendChild(polyline);

    // Assemble overlay
    exploreOverlay.appendChild(exploreText);
    exploreOverlay.appendChild(exploreIcon);
    item.appendChild(exploreOverlay);
  });
});
</script>

3. Add the CSS:

Go to Website >Pages > Website Tools > Custom CSS
Paste the following code:


/*<--- ADD TEXT OVERLAY TO PORTFOLIO ITEMS --->*/

:root {
  --overlay-background: rgba(0,0,0,0.6);
  --text-color: white;
  --icon-stroke-color: white;
}

/* Image Title Overlay */
.grid-image {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
}

.grid-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.grid-image:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.grid-image:hover::before {
  opacity: 1;
}

.explore-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--overlay-background);
  overflow: hidden;
  height: 60px;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  opacity: 0;
}

.grid-image:hover .explore-overlay {
  height: 60px;
  opacity: 1;
}

.explore-text {
  white-space: nowrap;
  color: var(--text-color);
  font-weight: 300;
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.grid-image:hover .explore-text {
  opacity: 1;
  transform: translateX(0);
}

.explore-icon {
  width: 24px;
  height: 24px;
  color: var(--icon-stroke-color);
  margin-left: 10px;
  transform: translateX(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  font-weight: 300;
}

.grid-image:hover .explore-icon {
  transform: translateX(0);
  opacity: 1;
}

.grid-image img {
  transform-origin: center;
}

Customize the Code

You can tweak the overlay to fit your Squarespace design site’s style.

Use CSS Variables to Customize the Overlay
Adjust the overlay background, text, and icon colors by editing the CSS variables at the top of the CSS code. Try these examples:

:root {
  --overlay-background: rgba(0,0,0,0.8); /* Darker overlay */
  --text-color: #f0f0f0; /* Light gray text */
  --icon-stroke-color: #ffd700; /* Gold icon */
}

Change the Text: To update the text from “View Project,” find this line in the JavaScript:
exploreText.textContent = "View Project";

With these steps, you’ll have a sleek hover overlay on your Squarespace portfolio that’s both functional and eye-catching. Play around with the text and colors to make it your own. Happy coding!

Need help implementing this code on your website?

Looking for a custom Squarespace solution or need assistance tweaking this code? Minimist specializes in modern web design and Squarespace coding to fit your needs. Whether it’s styling adjustments, added functionality, or a fully custom site, I can help.

Book a Free Consultation

Articles