Question

我在div中有多个图像，如

<div class="am-container" id="am-container">
            <a href="#"><img src="images/1.jpg"></img></a>
            <a href="#"><img src="images/2.jpg"></img></a>
            <a href="#"><img src="images/3.jpg"></img></a>
            <a href="#"><img src="images/4.jpg"></img></a>
</div>

现在我想遍历所有图像并显示为模糊，鼠标悬停时它将显示为原始图像。

我可以用简单的jquery做，我已经通过gaussian.js blur.js进行了一些教程和演示，但是无法正确使用。

请建议。

Answer 1

您可以使用纯CSS执行此操作（仅适用于Webkit浏览器）

.am-container a img {
    filter: url(#blurred);
    -webkit-filter: blur(5px);
}

.am-container a:hover img {
    filter: url(#unblurred);
    -webkit-filter: blur(0px);
}

将此SVG添加到HTML代码中或从外部文件引用它（以添加Firefox支持）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blurred" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <filter id="unblurred" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
    </filter>
  </defs>
</svg>

JSFiddle

Answer 2

.am-container a img:hover {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}

使用此...

循环遍历div中的所有图像并显示具有模糊效果的图像

2 个答案: