Jump to content

Simple Grid Gallery Scale Hover Effect

Recommended Posts

1 hour ago, katiedunnit said:

Hey all - trying to add a hover scale effect to this simple grid gallery and I can't get it to stay within the bounds of the image container.
I tried a few different variations of code, and this is as close as I've gotten. Thoughts?sqsp-l3-code.thumb.jpeg.4b9647c4af760effcc1c9e73df379c13.jpeg

Can you share your site with the protected password so we can take a look?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment
  • 3 weeks later...

Actually got it! Thanks for your attention.

// Scale Up Grid Gallery//
.gallery-grid-item-wrapper {
    overflow: hidden;}
.gallery-grid-item-wrapper img {
    transition: all 0.3s;}
figure:hover img {
    transform: scale(1.3);
    transition: all 0.3s;}
//caption size//
  font-size: 15px!important;


Link to comment

Create an account or sign in to comment

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

  • 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.