Can I make a hover of Second Image on a Image? DAWN THEME

[Gorben]

Hello I have the following web where I am working on: https://b6c3b1lyud7zarov-72689647911.shopifypreview.com

The thing is that I want to have the 3 images without a gap and also to change to another second image when i hover over it. I know that it can have that effect with the Product or collection but I need to make it with images not products.

Can someone help please? I have coding knowledge and added this on theme.liquid just to test and it worked but now I need to change image:

<style>
.multicolumn-card__image-wrapper .media { transition: transform .5s; }
.multicolumn-card__image-wrapper .media:hover { transform: scale(1.1); }
</style>

[BSSCommerce-HDL]

Hi @Gorben 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

    
    .multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing {
        margin: 0px!important;
    }
    #Slider-template--23279604564309__multicolumn_rXrnXk {
        gap: 0px!important;
}
    #shopify-section-template--23279604564309__multicolumn_rXrnXk > div > div {
        padding: 0 0!important
    }

Here is result:

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Gorben]

Hello! The gap dissapeared! But it's only the half solution! I want it also to change to other image when you hover on it!

EXAMPLE:

       

HOVER:

THANKS!

[BSSCommerce-HDL]

Are you meaning you want hover effect? 
you can merge you first style hover code with my  sugguestion code like here:

<style>
.multicolumn-card__image-wrapper .media { transition: transform .5s; }
.multicolumn-card__image-wrapper .media:hover { transform: scale(1.1); }

.multicolumn-card__image-wrapper.multicolumn-card__image-wrapper--full-width.multicolumn-card-spacing {
        margin: 0px!important;
    }
    #Slider-template--23279604564309__multicolumn_rXrnXk {
        gap: 0px!important;
}
    #shopify-section-template--23279604564309__multicolumn_rXrnXk > div > div {
        padding: 0 0!important
    }
</style>

[Gorben]

Hello But one question! I also need it for my products in below those images! TO look like this:

is it possible? Thanks