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

using -webkit-transform: scale() to zoom image

本文关键字：缩放 图像 scale -webkit transform 使用      更新时间：2023-09-26

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<style>
#on{
    position:fixed;
    margin-top:40px;
    margin-left:40px;
}
#img1:hover{ -webkit-transform:scale(2,2);}
nav{
    position: fixed;
    width = 100px;
    height:70px;
    }
</style>
<nav>
<div id = "toolbar">
<input type="image" src="Icons/i.svg" width="50" height="50" id="I" class = "s">
<input type="image" src="Icons/e.svg" width="50" height="50" id="E"class = "s">
<input type="image" src="Icons/index.svg" width="50" height="50" id="index"class = "s">
</div>
</nav>

<div id ="on"><img src="Icons/bright.png"  alt="" width="100" height="100" id="img1"/></div>
</body>
</html>

使用背景图像。

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

动画示例

.zoom {
    background-image: url(http://lorempixel.com/200/200);
    width: 200px;
    height: 200px;
    background-size: 100%;
    background-position: 50% 50%;
    transition: all 2s;
}
.zoom:hover {
    background-size: 200%;
}
<div class="zoom"></div>

Fiddle

相关文章：