Question

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

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

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

这是我的测试博客＆gt; （SOVED）

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

请帮忙。感谢

Answer 1

更简单的代码，作为您期望的效果：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

搜索您的代码

.gallery-wrapper:hover img.gallry_img {
    -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
    -webkit-filter: blur(-3px);
    filter: blur(-3px);
    -moz-filter: blur(-3px);
}

并将其替换为下一个

.gallery-wrapper img.gallry_img {
    -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
    -webkit-filter: blur(-3px);
    filter: blur(-3px);
    -moz-filter: blur(-3px);
}
.gallery-wrapper:hover img.gallry_img {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -moz-filter: blur(0px);
}

Answer 3

感谢您更新原始问题以澄清您实际要求的内容。看完你的博客后，我意识到你想要实现的目标。

您需要的是在图像悬停时切换的基本模糊滤镜，除了简单的filter: blur();选择器外，还可以使用CSS :hover属性来实现。

在图像的默认样式中，默认情况下模糊滤镜应设置为模糊，因此CSS将为：

.image {
  filter: blur(3px);
  transition: all 0.3s;
}

需要注意的是：上面的transition属性会让模糊变得黯淡。效果。

当您将鼠标悬停在图片（.image:hover）上时，过滤器应该会更改，以便图像上不再出现模糊，因此CSS将为：

.image:hover {
  filter: blur(0px);
}

如果您想了解有关CSS滤镜模糊效果的更多信息，请have a look here。

我已将上述内容编译成一个JSFiddle示例供您使用，希望能更好地解释我的回答：Example

如果您还有其他问题，请随时提出。

如何编辑此代码以产生反转模糊效果？

3 个答案: