您的位置：首页 > Web前端 > CSS

[CSS] Scale on Hover with Transition

2017-04-17 15:15 363 查看
效果



源码

<!doctype html>

<html class="outline color">

<head>

<meta charset="utf-8">
<title>图片scale动画</title>

<style>
.img-box {
position: relative;
width: 740px;
height: 420px;
overflow: hidden;
}
/* 彩色图片缩放动画 */

.img-box>.image-scale {
position: absolute;
width: 900px;
height: 580px;
top: -80px;
left: -80px;
background-size: cover;
transition: all 0.5s ease-in-out;
}

.img-box:hover>.image-scale {
transform: scale(0.822);
}
</style>

</head>

<body>

<div class="img-box">
<div class="image-scale" style="background-image: url(./images/1.jpg);"></div>
</div>

</body>

</html>




img-box: 装图片的盒子,确保子元素超出部分隐藏起来.

image-scale: 绝对定位,并手动设置图片居中.

素材

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航