默认情况下图像模糊，悬停时显示？

【问题标题】：Blurred images by default, reveal when being hovered?默认情况下图像模糊，悬停时显示？
【发布时间】：2016-11-30 07:32:00
【问题描述】：

我想嵌入默认使用 CSS 模糊的图像（源图像文件不是模糊的）。当用户将鼠标悬停在图像上时，它应该被显示出来。如果它上面也有动画，那就太棒了。有没有办法做到这一点？

【问题讨论】：

标签： css image animation hover blur

【解决方案1】：

CSS filters（MDN 参考）可以做到这一点

img {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-transition: -webkit-filter .5s linear;
  transition: -webkit-filter .5s linear;
  transition: filter .5s linear;
  transition: filter .5s linear, -webkit-filter .5s linear;
}
img:hover {
  -webkit-filter: blur(0);
  filter: blur(0)
}

&lt;img src="http://www.fillmurray.com/460/300" alt="" /&gt;

【讨论】：