我希望在将鼠标悬停在图像上时缩放并模糊图像。我正在尝试使用代码,它在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');
}
答案 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中添加了工作模糊。
答案 1 :(得分:1)
您的代码中存在一些使其无效的错误
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
你应该把它留给一个单独的,即特定的样式表。
这是一个更新的jsFiddle我摆脱了波涛汹涌的过渡以及http://jsfiddle.net/XR32V/3/
答案 2 :(得分:1)
您可以使用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');
}
答案 3 :(得分:0)
简单的JS插件,用于缩放并在将鼠标悬停在图像上时模糊图像