Duration of Full hover animation with quick mouse tip / pinout?

I have a hang on the image. If you hover your mouse over and stay there with your mouse, the transition will take the specified duration.

I also made the correct transition when you left the place.

Now, I want the hover to start at a given duration, regardless of whether you just hovered over the image for a quick 1 millisecond.

Is this only possible with javascript?

.example { position: absolute;
             left: 0;
             height:320px;
             bottom: 0;
             width: 100%;
             background: #000;
             background-color: rgba(255, 255, 255, 0.4);
             opacity:0;
             -webkit-transition: background-color 2s ease-out;
             -moz-transition: background-color 2s ease-out;
             -o-transition: background-color 2s ease-out;
             -ms-transition: background-color 2s ease-out;

             transition: opacity 0.5s ease-in-out;
             -moz-transition: opacity 0.5s ease-in-out;
             -webkit-transition: opacity 0.5s ease-in-out;
             -o-transition: opacity 0.5s ease-in-out;
            -ms-transition: opacity 0.5s ease-in-out;
             transition: opacity 0.5s ease-in-out;
             text-align: center;
             line-height: 299px;
             text-decoration: none;
             color: #000000;
             font-size:30pt;
          }

   .image:hover .example { background-color: rgba(255, 255, 255, 0.4);
                         -webkit-transition: background-color 0.5s  ease-in-out;
                         -moz-transition: background-color 0.5s  ease-in-out;
                         -o-transition: background-color 0.5s  ease-in-out;
                         -ms-transition: background-color 0.5s ease-in-out;
                         transition: background-color 0.5s ease-in-out;
                         -webkit-transition: opacity 0.5s  ease-in-out;
                         -moz-transition: opacity 0.5s  ease-in-out;
                         -o-transition: opacity 0.5s  ease-in-out;
                         -ms-transition: opacity 0.5s  ease-in-out;
                         transition: opacity 0.5s ease-in-out;
                         opacity:1;
                       }

      

        
        
        
      

    

That being said, if I hover over the image, my text and background colors come to life, and when I leave the image, the text and background colors come to life. Everything works fine. (although my code is already a bit unsorted)

So, all I want is that the fade in and out animation will be fully executed, even if I just quickly hover over the image and back.

I think that this is impossible. (with css, only I mean)