svg blur transition example

by Stalk

HTML

<h1>hover on cat</h1>

<svg xmlns="http://www.w3.org/2000/svg" id="foo">
  <image xlink:href="https://vgy.me/0AqBge.png" x="0" y="0" height="100%" width="100%" filter="url(#blur)" />
  <filter id="blur" x="-5%" y="-5%" width="110%" height="110%" style="z-index: 2;">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

CSS

#foo {
  width: 600px;
  height: 400px;
  
  transition: all 1s ease;
}
#foo:hover {
  transform: translate(100px, 30px) rotate(90deg) scale(.7);
}