How to Fix: CSS transition with visibility not working

The issue you're experiencing with CSS transitions on visibility and opacity is due to the browser's interpretation of the transition property. In your case, both Chrome and Firefox are interpreting the transition time as a delay on hover out.

🔍 Why This Happens

• The transition property is not supported for the visibility and opacity properties. Instead, you can use the CSS 3 transitions on the opacity property, while setting the visibility to 'visible' or 'hidden' directly.

🔧 Proven Troubleshooting Steps

✨ Wrapping Up

To fix your issue, you can use either of the methods above. For example, in Case 1, replace the visibility property with opacity and set the transition to opacity:

#inner{ opacity:0; transition:opacity 1000ms;}

Then, update the hover state as follows:

#outer:hover #inner{ opacity:1; visibility:visible; }