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!


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 sould now "grow" when you move your cursor over them. 
I haven't ran into any issues with the following code, but let me know if you have any problems with it and I'll be happy to help troubleshoot. This code should be responsive across devices. 

Happy Designing! 

x Tiffany

 


 

CSS For Grow Hover Effect On Summary Block grid Thumbnails

Squarespace-CSS-trick-grow-hover-effect-rollover-effect-images.png

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

Tiffany-Davidson-Squarespace-Web-Designer-Squarespace-CSS-tricks-Hover-Rollover-Image-Effects.png

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);

}

 

Welcome!

tiffany-davidson-squarespace-web-designer-squarespace-seo-need-a-website.png

I'm Tiffany -
a Squarespace Web Designer & SEO Specialist. 

(Also - a perpetually curious, rambunctious introvert who lives in the wilderness!).

Here on the blog, I write about Squarespace tips, creative inspiration, art & design, and being self-employed. 

Let me know if there's any way I can help you!

tiffany-davidson-squarespace-web-designer-squarespace-seo-expert.png

Recent Blog Posts:

Need help with something?
Please feel free to reach out to me:

Name *
Name