Squarespace CSS Trick: How To "Grow" Images Upon Hover / Mouse Rollover
Squarespace is such a wonderful platform for creating clean, professional, modern websites.
But we don't want our websites to feel overly simple, to the point of seeming flat.
A few dynamic features can feel more interactive and engaging to visitors, and a great way to add a touch of dynamics is through mouse rollover effects on your images!
I was able to find some CSS for grow effects, but I needed it for various Squarespace elements like blog post thumbnails, summary block thumbnails, and grid gallery block thumbnails.
After isolating these elements, I was able to create some CSS that works for each. I noticed so many questions on the Internet about hover effects for images on Squarespace, so I wanted to share this as one option. I'll be sharing more fun image hover effects in the near future, so stay tuned!
How to grow images upon hover on your squarespace site using custom cSS
First - figure out which type of Squarespace element you're wanting to make dynamic. Is it a gallery image block? A summary grid block? Blog list thumbnail images? Then, simply copy and paste the corresponding code below into your Custom CSS box in your Squarespace dashboard.
Save & voila! Your images should now "grow" when you move your cursor over them.
CSS For Grow Hover Effect On Summary Block grid Thumbnails
Copy & paste the following code into your Custom CSS box:
/*GROW HOVER EFFECT FOR SUMMARY BLOCK THUMBNAIL IMAGES*/
.sqs-gallery-design-autogrid .summary-thumbnail {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.sqs-gallery-design-autogrid .summary-thumbnail:hover,
.sqs-gallery-design-autogrid .summary-thumbnail:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
CSS For Grow Hover Effect On Blog List Thumbnails (when using the grid style blog layout)
Copy & paste the following into your Custom CSS box:
/*GROW HOVER EFFECT FOR BLOG LIST THUMBNAILS*/
.BlogList-item-image {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.BlogList-item-image:hover,
.BlogList-item-image:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
CSS For Grow Hover Effect On Gallery Thumbnails
Copy & paste the following into your Custom CSS box:
/*GROW HOVER EFFECT FOR GALLERY THUMBNAIL IMAGES*/
a img.thumb-image {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
a img.thumb-image:hover,
a img.thumb-image:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
Hope you’ve found this helpful! Feel free to reach out if I can assist you further.
Happy designing everyone! Take care.
x
Tiffany
Welcome!
Hey there! I’m Tiffany ~ a Squarespace Web Designer & SEO Expert. I design beautiful & professional websites that rank well on Google, & I teach courses on becoming a Squarespace SEO Expert, Monetizing Squarespace, and Starting Your Own Squarespace Design Business!
Feel free to contact me at: tiffany@tiffany-davidson.com
Sign up for a free Squarespace trial here! #afflink
My Courses:
Learn how to get your Squarespace website (or any Squarespace website) to Google Page 1 using organic SEO techniques!
As a Squarespace Designer & SEO Expert, I know the methodology for truly getting Squarespace websites to rank on Google Page 1, and I’m going to teach it to you!
This course is a self-guided lifetime-access course, so you can go at your own preferred pace and keep it as a resource to return to time and time again.
Please note: This course was created using Squarespace version 7.0. The same principles will still apply with version 7.1, but the overall user interface will look slightly different. Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made. Please also note the course cost is $267 in USD currency.
Can you monetize a Squarespace website? Yes, you can. And I’ll teach you how.
Did you know your Squarespace website could be making money for you, even while you sleep, work your day job, or travel?
In this course, which includes over 3 hours of video instruction, I’ll teach you how to use SEO blogging to drive traffic to your site, and then how to monetize those visits.
Please note: This course was created using Squarespace version 7.0. The same principles will still apply with version 7.1, but the overall user interface will look slightly different. Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made. Please also note the course cost is in USD currency.
Learn how to turn your basic design knowledge into a functional and successful business!
In this course, I outline the procedures I use to run my Squarespace design business which continues to grow in revenue every single year and has given me wonderful freedom to not only work from home, but to be able to craft my own schedule. Becoming a Squarespace designer changed my life, and I think during these new times we find ourselves in, where so many businesses are having to transition to the online marketplace in order to stay afloat, becoming a self-employed web designer is a really smart move.
Please note:
This is not a design course. Rather, this course assumes you already possess at least a basic understanding of Squarespace design and need guidance on converting that knowledge into a business.
Due to the inherent nature of digital products, refunds are strictly prohibited once purchase has been made.
The course cost is in USD currency
