一个网页中设置两个网页的入口,背景图片hover时变大。
实现效果图:
利用hover时图片移动特效实现网页50%+50%的双页面。
<style>
.percent {
width: 100%;
}
.percent .left{
width: 50%;
float:left;
overflow: hidden;
}
.percent .right{
width: 50%;
float:right;
overflow: hidden;
}
div img {
width:100%;
cursor: pointer;
transition: all 0.6s;
}
div img:hover {
transform: scale(1.4);
}
</style>
</head>
<body>
<div class="percent">
<div class="left">
<img src="t.jpg" />
</div>
<div class="right">
<img src="t.jpg" />
</div>
</div>
</body>
补充:图片外box设置font-size:0;可去除上下两图片间的空隙。