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

Question

下午好

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

当鼠标悬停在 tile-inner class 上时，我需要一个 picture-bluring 效果，但不要模糊底部的标题或图标（附加 picture-link）。当前的 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>

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

你好法比奥

Answer 1

您可以使用filter blur

和CSS。

Answer 2

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

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

Answer 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>

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

Image effect on hover interfering with text caption

html

css

image

hover