Hi! I have an issue with hover animation and wasn’t able to find any answer. When pointing with a mouse over image it instantly changes to the second picture like it should. However when you remove the mouse from product, there is animation of second picture fading, rather then being instant. I need both transition to be instant, thanks in advance! There is a product with two images in Womenswear section.
link: krecet.com password:bahdab
password will be changed on a 28th Jun
1 Like
Hi @krecet , I see that the effect when moving the mouse in and out happens very quickly. How do you want it to improve?
Yes, there are both pretty quick. But animation happens almost instantly when mouse is put over hover, I very much like that. However when removing the mouse from hover, animation is more like fast fading rather then instant change back to the first photo.
Basically, I want both animation to be instant. Let me know if you understood what i mean!
1 Like
Hey @krecet
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
2 Likes
Try this code. You can add the following CSS code to the theme.css or base.css file:
.card-wrapper .card__media .media.media–transparent img:nth-child(2) {
transition: “unset”
}
Hi @krecet ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save
.card__media .media>img {
transition: unset !important;
}
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
1 Like