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

Question

下午好。

我根据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

Greeetings Fabio

Answer 1

如果您只想影响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>

Answer 2

您可以使用filter blur

使用CSS。

Answer 3

我不知道你的css是怎样的，但你可以尝试在你的css文件中添加它：

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