Jump to content

How to apply zoom when hovering over images

Go to solution Solved by Web_Solutions,

Recommended Posts

15 minutes ago, angelosgambati said:

Hi, 

I have been trying to add code to my custom CSS to make the images in my masonry gallery page zoom in when hovering over them on certain pages.  None of the codes work for me. Does anyone know why this would be the case? 

This is the code I'm using:
.gallery-masonry-item img:hover
  {transform:Scale(1.2)}

https://www.angelosgambati.com/overview 

 

Thank you, 

Angelo.

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS.

[data-section-id="650323547974590aaa61f414"] {
  .gallery-masonry-item img {
    transition: 0.3s;
  } 
  .gallery-masonry-item:hover img {
    transform: scale(1.2);
  }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 hour ago, angelosgambati said:

It still doesn't work for me. I think there is something wrong with my CSS

It looks like the new CSS has been inserted into the middle of existing CSS (before the final "}") which means that it is incorrect and won't function.

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • Solution
1 hour ago, angelosgambati said:

Thank you for sending the code. 

It still doesn't work for me. I think there is something wrong with my CSS because I have tried to use other CSS codes and they haven't worked either. 

Screen Shot 2023-10-12 at 7.12.49 AM.png

Please add the code on bottom. not in the middle your previous code.

Screenshot_228.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 hour ago, angelosgambati said:

Thank you so much!!  

Do you know how I would make the images zoom outside of the frame?

Do you want like this?

https://www.loom.com/share/4cc8a1382d384498ab1e10db2b7ded4d?sid=3f3638a4-11e3-4a4e-9e48-6071f6c21301

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
6 minutes ago, angelosgambati said:

Yes please 

 

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS. Put these code on the bottom. Not in the middle of any code

[data-section-id="650323547974590aaa61f414"] {
  .gallery-masonry-item .gallery-masonry-item-wrapper{
    overflow: visible !important;
  }
  .gallery-masonry-item .gallery-masonry-item-wrapper img{
    transition: 0.3s;
  }
  .gallery-masonry-item:hover .gallery-masonry-item-wrapper img{
    transform: scale(1.3);
  }
}

 

Screenshot_228.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.