Smooth image transation on hover - dawn theme

[drew23]

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:

[D-blaqfolawe09]

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.

[drew23]

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

[made4Uo · 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;
  }

[drew23]

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]

Hi @drew23,

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

[drew23]

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

[drew23]

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]

Hi @drew23,

The website uses this for transition

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

[drew23]

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]

@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

[Nedarahmdesigns]

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