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

Question

当 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

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

我做错了什么？我知道如何用 jquery 做到这一点，但我宁愿坚持使用可能的 CSS。这是我的 Bootstrap :http://www.bootply.com/JvpjR8o0YM

如有任何帮助，我们将不胜感激。

编辑:如果有人知道实现此效果的更好方法，我会很高兴听到。

Answer 1

最简单的解决方案是在悬停父级时模糊图像 .blur-thumb , 而不是 <img />元素:

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

.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:hover img {
  -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;
}

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