Opacity doesn't fade - hovering out animation

Hi everyone,

My first post here & I’m also designing my first website! I’ve been stuck on this problem for hours and hoping for some help!

I’m proud that I succeed to create a fading image swap as a hover animation. But when I’m trying to create the reverse on hovering out - the image doesn’t fade at all! I’m using both the animations ‘opacity’ and ‘hide/show’. It just becomes visible after the duration I’ve set for the opacity (without any changes in the opacity).

My aim:

  1. When hovering on the 1st image (black & white image), it fades into the image below (colour image). This works!
  2. When hovering out from the image, the 1st image fades back into place. It doesn’t matter if the 2nd image fades out or if it’s the 1st image that fades back into place.

It’s the 2nd part that doesn’t work.

I really hope someone can help me - thank you!!

Hover: Webflow - A Vision For Seabank 3

Hover out: Webflow - A Vision For Seabank 3


Here is my public share link: LINK
(how to access public share link)

hi @Designer22 and welcome. The links you have provided return 404. Did you finished WFU courses to be familiar how to work in WF or check out “Made in Webflow” examples to study how things are done or have done search on forum before posting a request?

The best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.

When posting please:

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @formMemberName