Implement blur effect on image using CSS3

HTML

<h1 class="blur">
Blur on Hover
</h1>
<img class="blur" src="http://images.freeimages.com/images/small-previews/2fe/butterfly-1390152.jpg" />
<br/>
<h1 class="blurGrey">
Blur and GreyScale on Hover
</h1>
<img class="blurGrey" src="http://images.freeimages.com/images/small-previews/2fe/butterfly-1390152.jpg" />

CSS

h1 {
  font-size:24px;
  font-family:Calibri;
}
.blur {
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.blur:hover {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

.blurGrey {
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.blurGrey:hover {
  -webkit-filter: grayscale(100%) blur(3px);
  filter: grayscale(100%) blur(3px);
}