Html 在跨度悬停事件上保持图像模糊效果

当span悬停（span位于img顶部）时，我在保持图像的模糊效果方面遇到了问题

这是我的CSS

.projects-thumb {
    padding-bottom: 30px;
}

.project-article-thumb {
    height: 200px;
    width: 100%;
}

/*BLUR*/
.blur-thumb {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

.blur-thumb img{

    height: 200px;
    width: 100%;

  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;


}

.blur-thumb .thumb-detail {
    position: absolute;
    top: 20%;
    width: 300px;
    display: none;
}

.blur-thumb img:hover {
  -webkit-filter: blur(2px) grayscale(1) invert(0.1);
}

.blur-thumb img:hover + .thumb-detail{
    position: absolute;
    top: 20%;
    width: 300px;
    display: block;
}

.thumb-detail:hover > .blur-thumb img {
    display: block;
    -webkit-filter: blur(2px) grayscale(1) invert(0.1);
}

.thumb-detail:hover{
    display: block;
}

HTML

这是一个测试

我做错了什么？我知道如何使用jquery实现这一点，但我更愿意尽可能使用CSS。这是我的靴子：

任何帮助都将不胜感激，谢谢

---

编辑：如果有人知道实现此效果的更好方法，我很乐意听到。

最简单的解决方案是在悬停父对象时模糊图像。

.blur thumb

，而不是

这是一个测试

这是一种完美的工作方式。我很惊讶我忽略了这一点。非常感谢，你救了我一天！真不客气，我很高兴能帮上忙！

<div class="col-xs-6 col-md-4 projects-thumb">
    <div class="row">
        <div class="project-article-thumb">
            <div class="blur-thumb">
                <img src="http://media.moddb.com/images/mods/1/22/21735/grizzly3-300x200.jpg" class="img-responsive" height="200px" width="300px" alt="bear"> <span class="centered thumb-detail" style="color: #f00">This is a test </span>

            </div>
        </div>
    </div>
</div>

.blur-thumb:hover img {
    -webkit-filter: blur(2px) grayscale(1) invert(0.1);
}