HTML CSS examples for CSS Animation:Image
Animate an image blurring
<html> <head> <title>Blur - CSS blur</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #css-filter-blur { margin: 20px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #css-filter-blur:hover { -webkit-filter: blur(2px); filter: url(#blur-effect-1); } </style> </head> <!--from w ww.j ava 2 s .c om--> <body> <img id="css-filter-blur" src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Blur" height="200" width="300"> <svg id="svg-image-blur"> <filter id="blur-effect-1"> <fegaussianblur stdDeviation="2" /> </filter> </svg> </body> </html>