How to apply zoom when hovering over images

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.

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);
  }
}

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. 

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.

Thank you so much!!  

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

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

Yes please !!

On 10/12/2023 at 9:07 PM, Web_Solutions said:

Do you want like this?

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

Yes please 

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);
  }
}