<style>

.bg {
  position: absolute;
  margin: auto;
  cursor: pointer;
  top:0; bottom:0;
  left:0; right:0;
  width: 600px;
  height: 300px;
  background: url(https://i.pinimg.com/564x/2b/cd/f2/2bcdf2ce879e5b38680600120acdd86f.jpg) no-repeat center;
  background-size: contain;
}

.bg1 { filter: url('#heat'); }
.bg2 { filter: url('#parallax'); }
.bg3 { filter: url('#blur'); }

#label {
  position: absolute;
  margin: auto;
  top:0; bottom:0;
  left:0; right:0;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 100px;
  font-family: sans-serif;
  color: white;
  opacity: 0.3;
}
</style>
<script>

var filters = ['bg1', 'bg2', 'bg3'];
var labels = ['HEAT', 'PARALLAX', 'BLUR'];
var img = document.getElementById("img");
var lbl = document.getElementById("label");
var sel = 1;

img.onclick = function() {
  img.className = 'bg ' + filters[sel];
  lbl.innerHTML = labels[sel++];
  if (sel == 3) {
    sel = 0;
  }
}
</script>
<div class="bg bg1" id="img">
  <h1 id="label">Текст</h1>
</div>

<svg>
  <defs>
    <filter id="heat">
      <feTurbulence type="fractalNoise" baseFrequency="0.005" numOctaves="3" result="warp">
      </feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="B" scale="40" in="SourceGraphic" in2="warp">
        <animate attributeName="scale" dur="5s" values="0 ; 10 ; 30 ; 10 ; 0" 
        keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" repeatCount="indefinite"/>
      </feDisplacementMap>
    </filter>
    
    <filter id="parallax">
      <feDisplacementMap xChannelSelector="R" yChannelSelector="B" scale="20" in="SourceGraphic">
        <animate attributeName="scale" dur="2s" values="0 ; 20 ; 0" 
        keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
      </feDisplacementMap>
    </filter>
  </defs> 
  
  <filter id="blur">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="15,0">
        <animate attributeName="stdDeviation" dur="4s" values="0,0 ; 10,0 ; 0,1" 
        keyTimes="0 ;0.5; 1" repeatCount="indefinite"/>
      </feGaussianBlur>
    </filter>
  </defs>
</svg>