css - 默认模糊图像，悬停时显示？

Question

我想嵌入默认情况下使用 CSS 进行模糊处理的图像(源图像文件未进行模糊处理)。当用户将鼠标悬停在图像上时，应该显示该图像。如果它上面也有动画，那就太棒了。有什么办法吗？

Answer 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)
}

<img src="http://www.fillmurray.com/460/300" alt="" />