Shopify themes, liquid, logos, and UX
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
Hi @DJ1992 Please follow below 2 steps. hope this will help you.
Step:1
step:2
Hi Alok - I am looking for this on MOBILE.
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>
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.
I have read up about how mobiles don't actually have a mouse hover capacity?
Hi,
This theme doesn't have this feature but it can be solved if you are interested.
thanks.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025