Jump to content

Magnify on Hover - Gallery Block Photos

Recommended Posts


I am using the Foster Template

Can anybody please give advice or help with this issue. I have a gallery block that's on an index page and I want to be able to magnify the selected photo when hovering over it with the mouse so the photo expands slightly on hover. Can you please tell me how this could be done whilst also allowing the highlighted photo to still link through to its specific page when clicked on.

Thank you in advance

The page in question can be seen at https://ratcliffeandratcliffe.squarespace.com/therapy 

Screenshot 2019-10-25 at 18.29.00.png

Link to comment
  • Replies 1
  • Views 505
  • Created
  • Last Reply

I've managed to find this custom page for index pages.

It will turn the photos from colour to black and white on hover and still allows a click through even in the gallery block

Design > Custom CSS

#collection - find the page id for the page in question = collection followed by numbers

body#collection-.........299 img {

       -webkit-filter: none;

       filter: none;


body#collection- .....299 img:hover {

-webkit-filter: grayscale(100%);

       filter: grayscale(100%);       


It's working great on our website 

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.