在悬停过渡上创建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);
}

圆顶小提琴

，或者您可以使用SVG Blug Filter（更好的交叉浏览器支持）

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

带有SVG和CSS过滤器的圆顶小提琴