Zoom in on image with hover - art portfolio

Hello! I need help with the CSS to have my portfolio page zoom in on hover, AND expand past the original dimensions of the image (so you can properly see a zoomed in image).

I've tried a multitude of the various answers given throughout this forum, but no matter what I paste into custom CSS, nothing works.

Thank you in advance for the help!

https://www.jacquelinestuerzl.com/spirits

Add to Design > Custom CSS

/* Image hover */
div.image-block:hover img {
    transform: scale(1.3);
    transition: all 0.3s ease;
}
div.image-block img {
    transition: all 0.3s ease;
}

Still not working. I've had to add borders too, to my listings, to make everything square. I can't believe that it doesn't allow separate sized images for different products. 

On 8/14/2023 at 1:55 AM, jacquelinestuerzl said:

Still not working. I've had to add borders too, to my listings, to make everything square. I can't believe that it doesn't allow separate sized images for different products. 

I just tested, the hover code still works here. Can you keep code in CSS box? We can check it again easier

On 7/31/2023 at 3:02 PM, tuanphan said:

Add to Design > Custom CSS

/* Image hover */
div.image-block:hover img {
    transform: scale(1.3);
    transition: all 0.3s ease;
}
div.image-block img {
    transition: all 0.3s ease;
}

 

Hi there, I've been trying various different "zoom on hover" code blocks suggested by this forum for my own gallery page and haven't been able to make a single one work, including this one. Here's a snippet of my custom CSS. Is there anything here preventing this code from working? Website: Felixtindall.com

On 3/3/2024 at 3:24 PM, FelixTindall said:

Hi there, I've been trying various different "zoom on hover" code blocks suggested by this forum for my own gallery page and haven't been able to make a single one work, including this one. Here's a snippet of my custom CSS. Is there anything here preventing this code from working? Website: Felixtindall.com

With your case, use this CSS code

/* Image hover */
span.thumb:hover img {
    transform: scale(1.3);
    transition: all 0.3s ease;
}
span.thumb img {
    transition: all 0.3s ease;
}
span.thumb {
    overflow: hidden;
}

Thank you!