使用CSS顺利缩放图像

我有一张图片，如果用户将鼠标移到它上面，我想缩放图片。目前，这并不顺利。使用CSS顺利缩放图像

例子：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Zoom</title> 
<style> 
.zoom:hover { zoom: 1.5; } 
</style> 
</head> 
<body> 
<p><img src="images/image.png" class="zoom"></p> 
</body> 
</html>

来源

2015-04-23 Nikita Smith

使用'transition'属性。无论如何，'zoom'是非标准的属性。 – chatoo

使用transform平滑变焦：

.zoom { 
transition: transform 1s; 
}

但是，你应该改变scale代替变焦（感谢@val）：

.zoom:hover { 
    transform: scale(2); 
}

我created a fiddle，只为你。

来源

2015-04-23 06:57:41 tjati

这将只适用于缩放设置为变换：缩放（1.5），而不是缩放（1.5） – vals

只需添加这个CSS和看看它的样子:)

.zoom{ -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); transition:0.7s ease all; -webkit-transition:0.7s ease all; -moz-transition:0.7s ease all;} 

.zoom:hover{ -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);}

来源

2015-04-23 07:06:05

为了平稳过渡，必须使用转换属性。

.zoom{ 
    transition: all .5s; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    -ms-transition: all .5s; 
} 

.zoom:hover { 
transform : scale(1.25); 
-moz-transform : scale(1.25); 
-webkit-transform : scale(1.25); 
-o-transform : scale(1.25); 
-ms-transform : scale(1.25); 
}

来源

2015-04-23 07:21:43

使用CSS顺利缩放图像

回答

相关问题