悬停干扰文本标题的图像效果答案

【问题标题】：Image effect on hover interfering with text caption悬停干扰文本标题的图像效果
【发布时间】：2016-07-28 10:10:12
【问题描述】：

下午好

我正在构建一个基于 GREENTREELABS (http://www.final-tiles-gallery.com/gallery-with-captions-and-sharing.html) 提供的 jquery 网格的图片库。

当悬停在tile-inner 类上时，我需要一个图片模糊效果，但也不需要模糊底部的标题或图标（附加图片链接）。这对当前的 HTML 标记是否可行？我已经尝试了一些仅使用 CSS 和 jquery 的东西，但我总是模糊一切 - 如果其他一切都失败了，更改图片只是一种选择。

有人有好主意吗？任何帮助表示赞赏 - 这可能是我可以搜索的特定名称的常见问题？

<div class='tile'>
    <figure>
        <a class='tile-inner' href='img/originals/001.jpg' >
            <img class='item' src='img/thumbs/001.jpg alt='hello world' />
            <span class='title'>Hello World</span>
            <span class='subtitle'>
                <p class='subsub'>Info 1</p>
                <p class='subsub'>Info 2</p>
                <p class='subsub'>Info 3</p>
            </span>
        </a>
    </figure>
    <div class='social'>;
        <a href='#' data-social='twitter'><i class=''></i></a>
        <a href='#' data-social='facebook'><i class=''></i></a>
        <a href='#' data-social='pinterest'><i class='-circled'></i></a>
    </div>
</div>

这 3 种方式都不能正常工作，最后一种是最好的，但将鼠标悬停在跨度上会消除模糊效果。 check the 3 ways

问候法比奥

【问题讨论】：

向我们展示您当前的“模糊”代码
查看我上传的第二张照片。这很好地证明了我的困境！
是的，但我想查看导致问题的代码。

标签： html css image hover

【解决方案1】：

您可以使用filter blur

使用 CSS。

【讨论】：

【解决方案2】：

我不知道你的 css 是什么样的，但你可以尝试在你的 css 文件中添加这个：

`.item:hover{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);`
}

【讨论】：

【解决方案3】：

如果你只想影响img，只针对img：

.tile-inner:hover img {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  filter: blur(5px);
}

<div class='tile'>
    <figure>
        <a class='tile-inner' href='img/originals/001.jpg' >
            <img class='item' src='http://placekitten.com/200/300' alt='hello world' />
            <span class='title'>Hello World</span>
            <span class='subtitle'>
                <p class='subsub'>Info 1</p>
                <p class='subsub'>Info 2</p>
                <p class='subsub'>Info 3</p>
            </span>
        </a>
    </figure>
    <div class='social'>;
        <a href='#' data-social='twitter'><i class=''></i></a>
        <a href='#' data-social='facebook'><i class=''></i></a>
        <a href='#' data-social='pinterest'><i class='-circled'></i></a>
    </div>
</div>

【讨论】：

.tile:hover img{} 是解决方案 - 真是愚蠢的错误，只见树木不见森林......