Question

我有一个缩略图列表（投资组合项目），在悬停时有一些动画。因此，缩略图图像变为灰度，变得模糊并略微变亮。但是，我需要它顺利，所以我使用转换，它在Safari，Chrome和Opera中完美运行，但在Mozilla Firefox中失败（我目前正在Mac / FF 29上测试它）。这是HTML部分：

<ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail">
                 <a href="#gallery_1" data-toggle="lightbox">
                <img src="img/gallery/gallery_1.jpg" class="greyer" alt="">
                 </a>
                </div>
        </li>

CSS如下：

.greyer {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  transition: all 500ms ease;
}

.greyer:hover {
-webkit-filter: grayscale(100%) brightness(140%) blur(1px);
-o-filter: grayscale(100%) brightness(140%) blur(1px);
-moz-filter: grayscale(100%) brightness(140%) blur(1px);
-ms-filter: grayscale(100%) brightness(140%) blur(1px);
filter: grayscale(100%) brightness(140%) blur(1px);
filter: url(grayblurr.svg#grayscaledBlur);
}

提前感谢提示和解决方法！

Answer 1

我使用SVG尝试过。它没有显示灰度图像，但在Mozilla上显示模糊效果，在所有其他浏览器中工作正常。

这是代码：

Css：

<style>
.svg-only-blur {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  transition: all 500ms ease;
}


.svg-only-blur:hover {
-webkit-filter: grayscale(100%) brightness(140%) blur(4px);
-moz-filter: grayscale(100%) brightness(140%) blur(4px);
-o-filter: grayscale(100%) brightness(140%) blur(4px);
-ms-filter: grayscale(100%) brightness(140%) blur(4px);
filter: grayscale(100%) brightness(140%) blur(4px);
filter: url(#blur); 

}

</style>

HTML：

   <body>
<svg version="1.1"  height="0" width="0">
  <defs>
     <filter id="blur" x="0" y="0">
       <feGaussianBlur stdDeviation="3" />
     </filter>
  </defs>
</svg>  
<img src="1.jpg" class="svg-only-blur" alt="">

</body>

我希望这会对你有所帮助。

过渡效果不会在Mozilla FF中发生

1 个答案: