img缩放（放大效果）不起作用

Question

我有一个问题。

我想在悬停时放大img，但不起作用。

<div>
<img src="https://www.apple.com/v/iphone/home/x/images/home/business_addit_large.jpg">
</div>

<style>
div {width: 500px; height: 300px; overflow:hidden}
img {display: block; margin:auto;width: 500px; height: 300px;}
img:hover {transform: scale(1,1);}
</style>

这是代码。

Answer 1

div {width: 500px; height: 300px; overflow:hidden}
img {display: block; margin:auto;width: 500px; height: 300px; transition: transform 1s;}
img:hover {transform: scale(1.1);}

<div>
<img src="https://www.apple.com/v/iphone/home/x/images/home/business_addit_large.jpg">
</div>

这只是一个错字scale(1,1) => scale(1.1)

此外，如果要添加平滑效果，应添加transition。

Answer 2

输入错误。是transform: scale(1.1)。我在图像中添加了transition: 0.5s transform linear，以使效果更平滑。

div {width: 500px; height: 300px; overflow:hidden}
img {display: block; margin:auto;width: 500px; height: 300px; transition:0.5s transform linear; }
img:hover {transform: scale(1.1);}

<div>
<img src="https://www.apple.com/v/iphone/home/x/images/home/business_addit_large.jpg">
</div>