The service of solving problems of urban environment (graffity, potholes etc.). I show a photo after renovation. On mouse over I show the photo before renovation. On mouse out I’d like to restore the photo after renovation. Animation should be scaling both times.

I have failed miserably. My attempt:

index.php

    <?php
        <img alt='<?=$problem->name?>' 
             class='img-fluid' 
             src='uploads/<?=$problem->photoAfter?>' 
             data-before='uploads/<?=$problem->photoBefore?>' 
             data-after='uploads/<?=$problem->photoAfter?>' 
             onMouseOver='hover(this)' onMouseOut='back(this)'>
    
    <script>
        function hover(el){                                
            el.src = el.dataset.before;
            el.classList.remove("after");
            el.classList.add("before");
        }
    
    
        function back(el){
            el.src = el.dataset.after;
            el.classList.remove("before");
            el.classList.add("after");     
        }
    </script>


**site.css**

    .before {
        animation: scaling 1500ms;    
      }
      
      .after {
        animation: scaling 1500ms;
      }
    
      @keyframes scaling {
        0% { transform: scale(0); }    
        100% { transform: scale(1);}
      }

This code doesn’t work. Animation on mouse over works but it scales first and then substitutes the photo. And animation works only once. On mouse out it just substitutes the photo.

Could you help me?