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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.

/* SIMPLE GRID ANIMATION */
// Scale Up Grid Gallery//
[data-section-id="61afbb36e3c6b10a92958949"]{
.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//
.gallery-caption-content{
  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.