轉換效果不會在Mozilla FF中發生

我有一个缩略图列表(投资组合项目)，其中有一些动画悬停。因此，缩略图图像变成灰度，变得模糊和亮一点。然而，我需要它平滑，所以我使用过渡，这在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);
}

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

我尝试过使用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>

相关内容

最新更新

热门标签：