Our site is using the North theme. We would like “Show second image on hover” for desktop but not for mobile.
On mobile, we want all clicks on the product image grid to directly go to the product page instead of displaying the 2nd image. Desktop it is fine because when clicking, it goes directly to the product page. I believe this is due to the hover settings for mobile users.
Any help on this would be greatly appreciated!
Hello, Khsu!
If you want to show second image on hover, you need to create 2 blocks (or 2 img). By default 2nd block must have opacity: 0, after this add pseudo class ‘hover’ and opacity: 1.
If you wanna add it only on desktop - create a media query to screen which you want.
P.S. in this example we added a “transform” for a little zoom and a “transition” for a better view (optional).
I hope that my answer helps you to resolve the issue. If you need a more detailed explanation or further help - just contact me.
