how to do zoom effect on slideshow banner shopify

[randytheasian]

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

EXPECTATION: https://glamedge.co/

[Mateen_Asghar]

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!

[randytheasian]

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.