html - 在悬停过渡时创建 css3 模糊

Question

我想要这里的艺术家框的效果，但我不确定如何重新创建它，请有人指出正确的方向。

https://www.coachella.com/art-at-coachella/

我看过源代码，但我似乎无法理解。提前致谢。

Answer 1

他们使用 filter css 属性在悬停时添加模糊。

HTML:

<div class="image">
  <img src="https://placekitten.com/200/200" />
</div>

CSS:

.image {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image:hover img {
  -webkit-filter: blur(5px);
    filter: blur(5px);
}

Dome fiddle

或者您可以使用 SVG blug 过滤器(更好的跨浏览器支持)

<svg viewbox="0 0 200 200">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" >
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
  <image xlink:href="https://placekitten.com/200/200" width="200px" height="200px" />
</svg>

CSS:

svg {
  width: 200px;
}

svg:hover {
  filter: url(#svgBlur);
}

Dome fiddle with svg and css filters