Code: https://will-myers.com/articles/replace-thumbnail-image-on-hover
/* ==== DESCRIPTION ==== */
Currently, your thumbnail images can only display a single image. In this tutorial, I’ll walk you how to display a different image on hover with just a little bit of CSS.
/* ==== USAGE ==== */
There are two code snippets on the installation page. One is for use on a Blog Collection page, the other is for use on a Summary Block. Copy and paste the code that you need into your Design » Custom CSS area. The Blog Collection page code only works on Squarespace 7.1 websites.
Next replace the data-section-id with the specific data-section-id of the for your Blog Items, or the block-id of your Summary Block. Use the Squarespace ID Finder tool to help find your id (link below).
To switch the thumbnail hover, you first need to target the right blog item. Using the code under the “Template” heading, replace the “POST_URL_HERE” text within the code with the url for a blog post item (everything after the .com). This targets that specific blog item.
Next, add a background image to that item by replacing the “NEW_IMG_URL” text within the url() function of the background-image property.
Copy that template code for as many thumbnails you want to replace on hover.
To upload an image to your Squarespace website, use the “Manage Custom Files” uploader in your Custom CSS area.
/* ==== ADDITIONAL LINKS ==== */
Plugin Store: https://www.will-myers.com/products
Learn: https://www.will-myers.com/newsletter
Newsletter: https://www.will-myers.com/learn-css-in-squarespace
SS ID Finder: https://www.will-myers.com/id-finder
