how to do zoom effect on slideshow banner shopify

Shopify Discussion
1

URL: https://jsdqft-gs.myshopify.com/

EXPECTATION: https://glamedge.co/

2

Hi @randytheasian , Follow these steps:

  • Go to Online Store > Themes:

    • Log in to your Shopify Admin Panel.
    • Navigate to Online Store > Themes.
    • Click Actions > Edit Code for your active theme.

  • Add CSS for the Zoom Effect:

    • In the code editor, open the Assets folder.
    • Locate your CSS file (e.g., theme.css or base.css).
    • Add this code at the bottom:
.slideshow__image {
    transition: transform 5s ease-in-out;
}

.slideshow__image:hover {
    transform: scale(1.1); /* Zooms in on hover */
}
  • Save and Test:
    • Save the changes.
    • Refresh your website and hover over the slideshow images to see the zoom effect.

For Automatic Zoom Without Hover:

If you want the zoom to happen automatically:

  • Replace the code above with this:
.slideshow__image {
    animation: zoomEffect 15s infinite;
}

@keyframes zoomEffect {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

Save, and refresh your website, and the slideshow images will zoom in and out smoothly!

If you need further assistance, feel free to reach out—I’d be happy to help!

3

Hi, there’s no effects on slideshow images after adding both of the codes you’ve provided. Could you refer to https://glamedge.co/ . I’m trying to make the zoom effect like theirs.