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

在悬停转换时创建css3模糊

1 个答案: