javascript - 我应该如何编辑这段代码来制作反转模糊效果？

Question

这是我从博客上复制的代码

here is the link cause I can't seem to make it work here

我希望它首先是模糊，然后在悬停时模糊应该消失。

这是我的测试博客>(已收藏)

如果您将鼠标悬停在帖子的缩略图上，您会看到它变得模糊， 所以，我想要的是 - 我希望该缩略图首先模糊，当悬停时模糊应该消失。

请帮忙。谢谢

Answer 1

一个更简单的代码，作为你想要的效果:

figure {
  background: black;
  color: white;
  width: 20em;
}
figure .image {
  background: transparent url("") center/0 0 no-repeat;
  overflow: hidden;
  position: relative;
}
figure .image:before,
figure .image:after {
  background-image: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: block;
  filter: blur(5px);
  transform: scale(1.1);
}
figure .image:before {
  padding-top: 66.6667%; // define image ratio. Here 3:2
}
figure .image:after {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: filter 200ms;
  width: 100%;
  z-index: 1;
}
figure figcaption {
  padding: 1em;
}
figure:hover .image:after {
  filter: blur(0px);
}

<figure>
  <div class="image" style="background-image: url(http://loremflickr.com/900/600/brazil,rio)"></div>
  <figcaption>Some caption</figcaption>
</figure>