Solved

Smooth image transation on hover - dawn theme

drew23
Pathfinder
107 0 12

Hey, 

I am currently trying to create smooth transation when I hover with my mouse over an image. At the moment the switch to the second image happens instantly. Does anyone know how to make more smooth?
Example Store:

Accepted Solution (1)

made4Uo
Shopify Partner
3818 715 1132

This is an accepted solution.

Hi @drew23,

 

Thank you for sharing the video, it helps us understand your request. This more on the opacity. Please follow the instructions below

 

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

 

  .card-wrapper:hover .media.media--hover-effect > img + img {
    transition: transform 2s ease, opacity 2s ease !important;
  }

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 11 (11)

D-blaqfolawe09
Explorer
65 5 12

Hello @drew23 how are you doing?

 In short, it depends on the theme you're using, that's why a premium theme is recommended, but the free theme can also be edited to perform the action required but it has to do with some coding language.

  Can I visit the website?

  If you have any complaints don't hesitate to let us know.

 

 If the suggestion is welcomed don't forget to hit the like button 

 

 Thanks.

banned
drew23
Pathfinder
107 0 12

I am currently using the dawn theme. 
This is the example website: https://www.root-atelier.com/

made4Uo
Shopify Partner
3818 715 1132

This is an accepted solution.

Hi @drew23,

 

Thank you for sharing the video, it helps us understand your request. This more on the opacity. Please follow the instructions below

 

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

 

  .card-wrapper:hover .media.media--hover-effect > img + img {
    transition: transform 2s ease, opacity 2s ease !important;
  }

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
drew23
Pathfinder
107 0 12

Hey Made4Uo, thanks for your help. I tried the code sadly it doesnt work for me. If you want to take a look yourself.
brokenmind.com PW: TESTX

made4Uo
Shopify Partner
3818 715 1132

Hi @drew23,

 

That is weird. I don't see the code in the base.css by the way

 

made4Uo_0-1659050787991.png

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
drew23
Pathfinder
107 0 12

my bad, i pasted it in the wrong base.css

drew23
Pathfinder
107 0 12

Hey Made4Uo thanks for your help! 
I have one more question. I tweaked the transation effect. But your transation make the image become really bright for a short period of time unlike the version root-atelier.com uses. You can check it out yourself

made4Uo
Shopify Partner
3818 715 1132

Hi @drew23,

 

The website uses this for transition

.card-wrapper:hover .media.media--hover-effect > img + img {
    transition: opacity 0.3s ease-out !important;
}

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
drew23
Pathfinder
107 0 12

Hey, thanks for finding the exact details. However I feel like my transation doesnt look like his. While the transation happens the Image becomes very bright for a short period of time. The actual transation effect simply blends into the second image.

https://www.youtube.com/watch?v=eY1FHBI3QhE

made4Uo
Shopify Partner
3818 715 1132

@drew23 

 

You have to play with opacity on that then. I am not sure if I am blind but it is hard for me to catch the different

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Nedarahmdesigns
Tourist
10 0 1

I can't find base.css in my assets folder. How would I get it on my assets folder?