How to Create Hover Effects for Squarespace Thumbnail Images

You know those thumbnail images you’ve been using for so long? They’re actually a bit of a hidden gem in the world of custom Squarespace design. You can make them grow, you can make them fade, and even turn them into buttons. The possibilities are almost endless and very fun to experiment with. All that it requires is a little bit of custom CSS (which is nowhere near as scary as it sounds). Below is a resource of my three favorite effects. 

Let's get started!

 

The implementation of this trick is actually quite simple as far as custom tweaks go. the only really “code” part is pasting a few line into the CSS editor. 

To make this work you have to do three thing 

Create a thumbnail or thumbnails that you want to have the effect apply to

Basically do as you would for any other thumbnail; create a new image block and upload your photo

Create a

“click-through URL" 

Again this is just your normal Squarespace procedure. Edit the image block, scroll down to the “click-through URL”  section and add a link

This could be to another page on your site, to another website entirely, or even to a file. Just edit the thumbnail block like you would any other.  

Finally select your effect and paste the code into the Custom CSS section 

a img.thumb-image:hover {
  background-color: #ffffff;
  opacity: 0.6;
} `
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);
 }
 .thumb-image:hover {
         filter: invert(100%) !important;
         -webkit-filter: invert(100%) !important;
   }

From the home screen click  Design ➡ Custom CSS

Paste one of the above chains of CSS and you're done. Go test your creation and if you’re feeling super adventurous play around with the code to see if you can make and cool tweaks.