在悬停时缩放和模糊图像

时间:2013-10-31 11:47:43

标签: html css css3

我希望在将鼠标悬停在图像上时缩放并模糊图像。我正在尝试使用代码,它在Chrome上以某种方式工作(不是平滑过渡,不知道为什么),但在FF或IE上不起作用,尽管我已经读过模糊应该适用于这些浏览器。

另外我的另一个问题是,是否可以从中心而不是左上角缩放图像,就像在示例中一样:

Demo Link

以下是代码:

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 个答案:

答案 0 :(得分:3)

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

.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

答案 1 :(得分:1)

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

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

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


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

答案 2 :(得分:1)

您可以使用transform:scaletransform-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'); 

}

答案 3 :(得分:0)

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

Get the Plugin