Hover Effect on Mobile - Taste Theme

Store Design
,

Topic summary

A Shopify store owner using the Taste theme seeks to implement a mobile hover effect that displays a product’s secondary image when users move their finger over it, without requiring a tap. This functionality worked on desktop and in a previous theme version but broke after an update.

Initial Solution:

  • CSS code was provided for the hover effect, which successfully works on desktop
  • The code targets .card-wrapper:hover to toggle image opacity and add a scale transform

Mobile Challenge:

  • True hover behavior (finger movement without tapping) doesn’t work with standard CSS hover states on mobile devices
  • A reference example was shared showing the desired mobile interaction

Current Status:

  • A working demo was created on the Dawn theme demonstrating the mobile hover effect
  • Implementation requires “many steps” and direct collaborator access to properly integrate
  • Multiple users have requested help implementing this same functionality
  • The solution appears to require custom JavaScript or touch event handling beyond simple CSS
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I’m using the Taste theme on Shopify, and I’m trying to enable a hover effect on mobile devices that displays a secondary image of each product when the user hovers over the image, without requiring them to tap. The hover effect works perfectly on desktop, but I haven’t been able to achieve the same effect on mobile devices.

In a previous version of the theme, I modified the code to allow this functionality, but since the latest update, my solution is no longer effective. I’m looking for a way to replicate a true hover experience on mobile so that users see the second image as they move their finger over the product image, without needing to click or tap.

Any advice or recommendations on how to achieve this would be greatly appreciated.

Thank you for your help! (my website is inlouve.com)

2

Hello,

thank you but i want to do it myself, i did it before the theme upgrade, with some help on this forum :slightly_smiling_face: I always tip the ppl who helps me :slightly_smiling_face:

3

Hi @inlouve ,

Please go to Actions > Edit code > Assets > component-card.css file and paste this at the bottom of the file:

.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);
    }
1 Like
4

Hello,

Thank you so much for the assistance! The hover effect works perfectly, and I’ve sent a tip as a token of my appreciation.

I have a quick follow-up question: is it possible to enable the secondary image to appear just by hovering over it with a finger on mobile, without needing to tap or click? I’d love to have the same seamless experience on mobile as on desktop if it’s feasible.

Thank you again for all your help!

1 Like
5

Hi @inlouve ,

Can you send me a demo for this? I will check it for you

6

https://www.lunettes-originales.fr/univers/lunettes-retro-vintage/

here is a perfect exemple on mobile

thank you

7

Hi @inlouve ,

I have created a live demo on dawn theme, please refer to the link (password: namphan), is this what you want?

Refer

Screenshot.png
Screenshot.png1525×709 112 KB

8

Hey,

yes it’s perfect one the 2 first pics on your website.

(vidéographer snowboard)

Can you help

Merci :slightly_smiling_face:

Lou

9

Hi @inlouve ,

It will need many steps to change, can I send you a collaborator invite? it will help me check and add everything better

10

Hello Namphan, can you please help me with this as well? I checked your demo store and it looks great!

Thanks for your help!

11

@namphan Please let me know when you have the chance if you can help me with this. Thanks for your help!

1 Like
12

Hi @melsonweb ,

I have replied to the message, after you send the information, I will check it.

Thank you.

13

@namphan Okay thank you, just sent the message!

14

Could you please help me with that to i‘m on Dawn 15.3.0 and i did some coding and when i open up my store the first time it works on one picture and than after that i dosen‘t anymore

15

Hi @micahhofer ,

Please send the website link, I will check it for you