Question

当跨度悬停时，我遇到了在图像上保持模糊效果的问题（跨度在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。这是我的bootply：http://www.bootply.com/JvpjR8o0YM

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

编辑：如果有人知道更好的方法来实现这种效果，我会很高兴听到它。

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

保持图像模糊效果对跨度悬停事件

1 个答案: