Question

我希望在将鼠标悬停在图像上时缩放并模糊图像。我正在尝试使用代码，它在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');   
}

Answer 1

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

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

或更好使用transform:scale（由Paulie_D建议）缩放它，因为它默认使用中心点作为变换的原点。

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

FYI。 filter: url(blur.svg#blur);在Firefox中阻止它为我工作，因为你的小提琴中的那个网址不存在该文件。

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

请参阅：Updated Fiddle using transform:scale and working blur。

Answer 2

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

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

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

这是一个更新的jsFiddle我摆脱了波涛汹涌的过渡以及http://jsfiddle.net/XR32V/3/

Answer 3

您可以使用transform:scale和transform-origin代替更改图片宽度。

请参阅：JSFiddle Demo

.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'); 

}

Answer 4

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

Get the Plugin

在悬停时缩放和模糊图像

4 个答案: