0

当悬停在图像上时，我想缩放和模糊图像。我正在尝试以下代码，它以某种方式在 Chrome 上工作（不是平滑过渡，不知道为什么），但在 FF 或 IE 上不起作用，尽管我已经读过模糊应该适用于这些浏览器。

我的另一个问题是，是否可以像示例中那样从中心而不是左上角缩放图像：

演示链接

这是代码：

HTML：

<div class="grow">
    <img src="image.jpg" />
</div>

CSS：

.grow{
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.grow img {
  height: 300px;
  width: 300px;
    -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;

     filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);  
    -ms-filter: blur(0px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); 


}

.grow img:hover {   
    width: 400px;
    height: 400px;    
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: url(blur.svg#blur);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5');   
}
4

4 回答 4

3

添加负边距以保持图像居中：

.grow img:hover {margin:-50px 0 0 -50px;}

或者更好地使用transform:scale（如 Paulie_D 所建议的）来缩放它，因为默认情况下它使用中心点作为其变换的原点。

.grow img:hover {transform: scale(1.33);}

供参考。停止它在 Firefox 中为我工作，filter: url(blur.svg#blur);因为该文件在您的 Fiddle 中的该 url 中不存在。

更新：在 FF 中添加了工作模糊。

请参阅：使用 transform:scale 和 working blur 更新了 Fiddle。

于 2013-10-31T12:13:01.790 回答
1

您的代码中有一些错误使其无效

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

你应该把它留给一个单独的，即特定的样式表。

这是一个更新的 jsFiddle，我也摆脱了断断续续的过渡http://jsfiddle.net/XR32V/3/

于 2013-10-31T11:56:00.700 回答
1

您可以使用transform:scaleandtransform-origin而不是更改图像宽度。

请参阅：JSFiddle 演示

.grow img:hover {   
  -webkit-transform: scale(1.33);
  -webkit-transform-origin: 50% 50%;
    /* add other prefixes as required /*

    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: url(blur.svg#blur);

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); 

}
于 2013-10-31T12:07:01.067 回答
0

将鼠标悬停在图像上时用于缩放和模糊图像的简单 JS 插件

获取插件

于 2014-03-26T10:40:43.977 回答