HTML+css3 图片放大效果
2024-09-20 09:31:25
<div class="enlarge">
<img src="xx" alt="图片"/>
</div>
第一种效果 超出不隐藏
.enlarge{
width: 200px;
height: 200px;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.2);
-ms-transform: scale(1.2);
}
第二种效果 超出隐藏
.enlarge{
width: 200px;
height: 200px;
overflow: hidden;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.2);
-ms-transform: scale(1.2);
}
最新文章
- RxJava 和 RxAndroid 一 (基础)
- flume学习
- vim不用鼠标复制粘贴
- 《一课经济学》书摘笔记I
- Java/Java Web中乱码解决汇总
- DHTMLX 前端框架 建立你的一个应用程序教程(一)
- Lost connection to MySQL server at ‘reading initial communication packet', system error: 0 mysql远程连接问题
- php之框架增加日志记录功能类
- [Cocos2d-x]CCSpriteFrameCache的使用
- UWP 使用Telerik Grid控件
- 1.Linux下libevent和memcached安装
- 关于视频断点续播和H5的本地存储
- ADO SQL手写分页
- Netty实现简单WebSocket服务器
- 代码块事务—TransactionScope
- C+＋函数模版的简单使用
- caffe_ssd学习-用自己的数据做训练
- vue-router 手势滑动触发返回
- mysql 权限管理 记录
- 6.2 socket 流协议与粘包