wtf.svg

<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
      <style>
        .container{position:relative;width:50%}.overlay{position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;opacity:0;transition:.5s ease;background-color:#008cba}.container:hover .overlay{opacity:1}
      </style>
      <div class="container" xmlns:xlink="http://www.w3.org/1999/xlink" >
        ![](https://user-images.githubusercontent.com/16245796/180425950-9fb7e8ed-2ca1-4cbf-b0c2-a3f0d09d212f.png)
        <div class="overlay" xmlns:xlink="http://www.w3.org/1999/xlink">
        ![](https://user-images.githubusercontent.com/16245796/180426060-f635dc5e-a24a-4e3d-b195-46cb14740a9b.png)
        </div>
      </div>
    </div>
  </foreignObject>
</svg>