Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Magnify on Hover - Gallery Block Photos



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

Edited by DawnR

Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0

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 

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...