Image change/hover for featured collections on mobile - Prestige Theme

[DJ1992]

Hi There, 

I am looking for the code to display second image on hover for mobile using the latest version of prestige theme.

Thank you 

[zaczee]

Hi @DJ1992 ,

Can you share your store url

[DJ1992]

Sure karoo.ae

[Alok_Kasgar]

Hi @DJ1992 Please follow below 2 steps. hope this will help you.

Step:1

step:2

[DJ1992]

Hi Alok - I am looking for this on MOBILE. 

[DJ1992]

Thanks @Nouman please outline under which folder to put this under. assets?

[DJ1992]

Thanks @Nouman please outline under which folder to put this under. assets?

[Alok_Kasgar]

Please follow below steps
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 481px) { .card .media.media--hover-effect > img:only-child, .card-wrapper .media.media--hover-effect > img:only-child { transition: transform var(--duration-long) ease; } .card:hover .media.media--hover-effect > img:first-child:only-child, .card-wrapper:hover .media.media--hover-effect > img:first-child:only-child { transform: scale(1.03); } .card-wrapper:hover .media.media--hover-effect > img:first-child:not(:only-child) { opacity: 0; } .card-wrapper:hover .media.media--hover-effect > img + img { opacity: 1; transition: transform var(--duration-long) ease; transform: scale(1.03); } }
</style>

[DJ1992]

Hi Alok. Thanks, it works on the customise preview for mobile on Shopify. However when I actually try on a mobile it doesn't change.

[DJ1992]

I have read up about how mobiles don't actually have a mouse hover capacity? 

[GMS_Developer]

Hi, 
This theme doesn't have this feature but it can be solved if you are interested.

thanks.