How can I hover over a blank space on a site and make an image fade in and slowly fades out after my mouse leaves that spot?

Question

I am able to make the image fade in but it immediately disappears when the cursor is off the image. I want it to slowly fade out. Here is an example of what I am wanting http://byvictoriageorge.studio/

Answer 1

Hard to say without code examples, but here is some theory.

You have a transition on your Image with opacity 0, and then it transitions to opacity 1 when hover.

You need to duplicate the same functionality, but vice versa. So what you can do it use the ease-in-out; setting on the transision css property.

So the full transition CSS would be soemthing like: transition: opacity 3s ease-in-out;

Edit: I can see your code transition: opacity .2s ease; so you want to change this to:

transition: opacity .2s ease-in-out;

Answer 2

You need a little Javascript

1. When the mouseenter add class (fade in)
2. When the mouseleave add class (fade out)

or only CSS What is the opposite of :hover (on mouse leave)?