Javascript 使用-webkit transform:scale（）缩放图像

我有一个导航栏和下面的图像。 我使用-webkit transform:scale（）来缩放悬停时的图像，但当它放大时，它会隐藏我的导航栏。我希望它在我的导航栏下方缩放。（不在其后面，因此zindex不适用。）

无标题文件
#在{
位置：固定；
边缘顶端：40px；
左边距：40px；
}
#img1:hover{-webkit变换：比例（2,2）；}
导航{
位置：固定；
宽度=100px；
高度：70像素；
}

使用背景图像

.zoom:hover {
    background-size: 200%;
}

动画示例

.zoom{
背景图片：url(http://lorempixel.com/200/200);
宽度：200px；
高度：200px；
背景大小：100%；
背景位置：50%50%；
过渡：所有2；
}
.缩放：悬停{
背景大小：200%；
}

---

也许您可以提供一些您尝试过的代码来帮助我们。听起来您可以通过其他方法而不是使用

转换来实现这一点，但是我们无法知道，除非我们有一些示例代码可以使用。我已经添加了代码。我只想使用transform，这样我就可以使用css transition属性来设置动画。@shryan您可以使用
背景大小来设置动画，请参见我的演示。1）我计划将图像放在画布上，因此不能使用背景图像。2） 我希望整个图像容器的大小增加，然后将其自身放置在导航栏下方。在您的演示中，图像容器的大小保持不变，并且图像会放大。不，但我提到了webkit变换缩放，因此很明显，我希望整个图像的大小增加，而且我希望放大一个“图像”，如我在问题中所说，而不是一个“背景图像”，因此问题是具体的。无论如何，谢谢你的帮助：）
.zoom:hover {
    background-size: 200%;
}