Dynamic Hover Effects to Portfolio Page in Squarespace 7.1
Interactive portfolio grids are one of the most effective ways to display your creative work on the web.
Instead of static images, adding dynamic hover effects, like image zooms and sliding text, gives your site a modern, high-end feel.
In Squarespace 7.1, you can achieve all of the above using just basic CSS, eliminating the need for costly plugins and bulky animations.
In this tutorial, you’ll discover:
Easily zoom in portfolio images on hover.
Show hidden text captions that slide up from the bottom.
Make sure your portfolio looks clean, minimal, and mobile-friendly.
Now let’s get started and make your Squarespace portfolio pretty!
What We’re Building
This is what the effect does:
When you hover over a portfolio item, the image will grow larger.
Simultaneously, the hidden project details (title, description) slide up and fade in as well.
This creates the kind of dynamic, cinematic vibe that immediately makes your portfolio pop.
All done with a minimally hacky approach using only CSS, no JavaScript, no page load performance hit!
The Complete CSS Code
Paste this CSS inside Design > Custom CSS in Squarespace:
/* Portfolio Grid Item - Basic Setup */
.portfolio-grid-basic .grid-item {
overflow: hidden;
position: relative;
z-index: 0;
}
/* Portfolio Text - Styling and Initial Hidden State */
.portfolio-grid-basic .portfolio-text {
position: absolute !important;
background: #efef !important;
width: 93%;
height: auto;
padding: 20px 50px 10px 20px;
opacity: 0.7 !important;
left: 20px;
bottom: 20px;
transition: 0.3s ease;
z-index: 1;
}
/* Portfolio Text - Animate on Hover */
.portfolio-grid-basic .grid-item:hover .portfolio-text {
opacity: 1 !important;
bottom: 0;
left: 0;
}
/* Portfolio Image - Smooth Transition */
.portfolio-grid-basic .grid-image {
transition: transform 0.5s ease;
}
/* Portfolio Image - Zoom on Hover */
.portfolio-grid-basic .grid-item:hover .grid-image {
transform: scale(1.2);
}
Done! Now your portfolio grid will have an elegant hover animation.
Code Breakdown (What Each Part Does)
| Section | What It Controls |
|---|---|
| .portfolio-grid-basic .grid-item | Prevents overflow and sets each portfolio item as relative for internal positioning. |
| .portfolio-text | Position hidden text over the image, semi-transparent at first (opacity: 0.7). |
| .grid-item:hover .portfolio-text | Animates the text — slides it from bottom-left into full visibility (opacity: 1). |
| .grid-image | Prepares the image for smooth zoom animation. |
| .grid-item:hover .grid-image | Scales the image up (scale(1.2)) to create a zoom effect on hover. |
How to Customize It for Your Brand
You can easily tweak the animation by changing a few CSS values:
| What to Customize | How |
|---|---|
| Background color of a text box | Change background: #efef; to any brand color |
| Zoom amount on the image | Change transform: scale(1.2); to scale(1.1) or scale(1.3) |
| Animation speed | Adjust transition: 0.3s (text) and 0.5s (image) |
| Text padding | Change padding: 20px 50px 10px 20px; for different spacing |
| Text transparency | Adjust opacity: 0.7 to 0.8, 0.9, or 1 for full visibility |
Fully flexible to match your brand's look and feel!
Quick Setup Summary
| Step | Action |
|---|---|
| 1️⃣ | Open Design > Custom CSS in Squarespace |
| 2️⃣ | Paste the provided CSS code |
| 3️⃣ | Make sure your portfolio uses matching classes (portfolio-grid-basic, grid-item, grid-image, portfolio-text) |
| 4️⃣ | Save and preview your new dynamic hover effects! |
Takes 5–10 minutes — huge visual upgrade instantly.
Final Result
After applying the code:
Your work portfolio images gently zoom in when hovered.
A simple text label slides up onto the image.
Your Squarespace portfolio feels more engaging, dynamic, and professional, just like premium agency websites!
Perfect for photographers, designers, creative studios, and anyone who wishes to show off their work.
Frequently Asked Questions
1. What does this hover effect do?
When someone hovers over a portfolio piece:
The image gently zooms in.
A written caption slides and fades from behind the bottom.
This has a cool, filmic quality, the kind that gives your portfolio the edge, and creates engagement too.
2. Is JavaScript involved, or are there any plugins to install?
No. The whole effect is done with pure CSS, so:
No JavaScript required
No third-party plugins
Quick as a bird, smooth, and easy to clean
3. What sort of projects would this hover effect work on?
This effect is perfect for:
Photographers With Portfolios
Designers presenting case studies
Agencies & Studios presenting - client works
Artists and architects, and freelancers looking for a high-end feel
4. But what if I myself want to have different overlays on hover?
You can easily customize it:
Change transform: scale(1.2) for a different zoom level
Modify transition: 0.3s to make the animation faster or slower
Replace bottom: 20px with top: 20px to make the text slide from the top
5. Can I include more than just titles in the text box?
Yes! You can add:
Project titles
Short descriptions
Text: Buttons such as “View Project” or “See More”
Just insert them inside the. portfolio-text and style that element.
6. Will this work on blogs or product grids?
It is made to be used for portfolio galleries; however, you can easily change the structure and the class names to apply these to your blog grid, your products, or any other section in your WordPress site.
7. Is this animation mobile-friendly?
Yes, the format is kept clean on mobile. Hover effects, though, do not activate on mobile views, so the animation can’t be seen — but the design is still visually balanced and works visually strong.
