JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-holder">
  <img src="http://thecsscoder.com/blog/blog-images/dog.jpg" width="300" id="targetb10" />
<svg height="199" width="300">
	  <image xlink:href="http://thecsscoder.com/blog/blog-images/dog.jpg" x="0" y="0" height="199px" width="300px" id="targeta10" filter="url(#motion-blur)" />
</svg>

</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<defs>	
				<filter id="motion-blur">
					<feGaussianBlur stdDeviation="12 0" />
				</filter>
            </defs>    
</svg>

CSS

#targetb10 {
	-ms-filter: "progid:DXImageTransform.Microsoft.MotionBlur(strength=10,direction=-90)";
	 display:none
   transform:rotate(45deg);
}
#targeta10:hover, #targetb10:hover {
    filter:none; 
}