Question

我有一个导航栏，下面是图片。我使用-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>

Answer 1

使用背景图片。

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

动画示例

＆＃13;

.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%;
}

＆＃13;

<div class="zoom"></div>

＆＃13;

<强> Fiddle

使用-webkit-transform：scale（）来缩放图像

1 个答案: