Hover Effect on Mobile not working properly

Shopify Discussion
1

Hello, i wanted the second picture to show when hovered on mobile

I added this code in component-card.css and base.css

I used this code which helped a little but its a little buggy
I used this code which helped a little but its a little buggy652×503 27.4 KB

This helped a little but there was still an issue which you can see in the video below

This almost fixed the issue as its working on the Home Page(featured collection) and “You May Also Like” Section however as you can see in the video, its not properly working on the collection pages.

I have enabled the hover option in collection pages but it is not working properly.

Please Help me out. I have been stuck with this problem for 3 whole days and its frustrating me.

URL:thoughtbox-pk.myshopify.com

PW:shopify123

2

HI @saadrafi ,

Hi,

Try the following code below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Please find this code in your base.css and replace this with the code below.

You are missing some bracket on you code. That is the reason the code in the base.css does not work (see image below)

@media screen and (max-width: 749px) {
	.banner__content::before{
		padding-bottom: 180.5% !important; 
    }
}

 @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);
  }
}

made4Uo_0-1659654018851.png
made4Uo_0-1659654018851.png769×638 33.5 KB

3

codehover1.PNG
codehover1.PNG786×443 20.9 KB

I added the bracket here but still no luck. its not working as intended. please help me

4

@made4Uo kindly help

5

@KetanKumar

@LitCommerce

6

@saadrafi

oh sorry for that issue

but sorry mobile device doesn’t possible hover bcz mobile device hover convert to touch

7

please watch the video. its working on home page but not on collection pages

8

@saadrafi

sorry but on click mobile device not hover work only touch event work

9

ok how can i make touch event work on collection like its working on home page

please see the video before giving a solution so we understand what the issue is

https://www.youtube.com/watch?v=EcL7WxTqjog&feature=emb_title

10

@saadrafi Did you ever get this figured out?

11

@melsonweb no sorry mobile device it work on touch event that good idea to work also may be just remove your link