dawn theme - can you make multicolumn images zoom in effect when u hover over them please ?

Store Design

Topic summary

A user seeks help adding a hover zoom effect to multicolumn images in the Dawn theme.

Initial Solution:

  • SetuBridge_1 provides CSS code to add a basic scale transform on hover by editing base.css
  • The code applies transform: scale(1.3) to .multicolumn-card .media:hover

Refinement:

  • User requests the zoom effect to occur within the image boundaries (contained zoom)
  • SetuBridge_1 provides updated CSS adding overflow: hidden to the image wrapper and adjusting the transform to scale(1.5) on the inner image element
  • This solution successfully addresses the request

Additional Requests:

  • User asks about customizing slideshow dimensions beyond Shopify’s default options for portrait-oriented product images
  • Another participant (withinkandivy) inquires about creating a full-screen zoom with scroll functionality instead of the hover effect

Both follow-up questions remain unanswered.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Screenshot 2022-04-22 at 7.40.44 PM.png
Screenshot 2022-04-22 at 7.40.44 PM.png2800×1388 357 KB

2 Likes
2

@SetuBridge_1

1 Like
3

Hello @lslelegance

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code->asstes->base.css
.multicolumn-card .media:hover {
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

Output : https://nimb.ws/R9NHUx

1 Like
4

@SetuBridge_1 it worked but I wish to have it the zoom inside the image itself like this effect here :

https://lslelegance.myshopify.com/collections

thanks !

1 Like
5

Hello @lslelegance

Greetings!!

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code->asstes->base.css
.multicolumn-card__image-wrapper .media{
        overflow: hidden;
        margin: 0 auto;
    }
  
    .multicolumn-card__image-wrapper .media img {
        width: 100%;
        transition: 0.5s all ease-in-out;
    }
  
    .multicolumn-card__image-wrapper .media:hover img {
        transform: scale(1.5);
    }

Output:

https://nimb.ws/ymBe30

1 Like
6

thanks !

1 Like
7

I wish to have slideshow have my custom size not Shopify options only pls because I want to use it for products portrait size pls and smaller thanks

8F4CCB5C-1F53-4FAA-9357-24FD21089D39.jpeg
8F4CCB5C-1F53-4FAA-9357-24FD21089D39.jpeg1170×675 54.9 KB

8

Hello - is there a way to do this but have the images zoom in to full screen with a scroll instead?