<div class="container">
  <img id="image" style="filter: url('#swirl');" src="https://static.vecteezy.com/system/resources/previews/000/274/892/non_2x/vector-pastel-background.jpg">
</div>
<svg>
  <filter id="swirl">
    <feTurbulence
      baseFrequency="0.010"
      numOctaves="2"
      result="wrap"
      type="fractalNoise">
    </feTurbulence>
    
    <feDisplacementMap
      id="liquid"
      class="liquid"
      in="SourceGraphic"
      in2="wrap"
      scale="300"
      xChannelSelector="R"
      yChannelSelector="B">
     </feDisplacementMap>
  </filter>
</svg>

.container 
{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 40px 0;
}


View Compiled
var image = document.getElementById("image");
var liquid = document.getElementById("liquid");

image.addEventListener('mouseover', normal);
image.addEventListener('mouseleave', swirly);

function normal() 
{
  TweenMax.to('#liquid', 1, { attr: {
                                       scale: 0
                                    }
                             });
}

function swirly() 
{
  TweenMax.to('#liquid', 1, { attr: {
                                       scale: 300
                                    }
                            });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js