使用的bootstrap 4.0框架(与标题无关)做css底层框架
html部分
投资移民计划
投资移民计划
css部分
//图片缩放
.ho-img {
display: block;
overflow: hidden
}.ho-img img {
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s
}.ho-img img:hover {
transform: scale(1.05)
}
//图片透明
.ho-alpha {
background: #000;
}.ho-alpha img {
opacity: 0.4;
filter: alpha(opacity=40);
}.ho-alpha img:hover {
opacity: 1;
filter: alpha(opacity=100);
}
//图片灰白
.ho-alpha2 img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}.ho-alpha2 img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}
//跟图片无关css
.ho-alpha strong,
.ho-alpha2 strong {
position: absolute;
bottom: 0.937rem;
}
【三种鼠标经过图片变动效果(透明度、灰白、缩放)】
推荐阅读
- JavaScript|JavaScript之DOM增删改查(重点)
- flex|C语言-使用goto语句从循环中跳出
- quill|Quill编辑器插入自定义HTML记录
- HTML基础
- HTML基本知识
- web前端笔记|web前端学习-第一天
- 百度网盘|教你优雅绕开百度网盘限速机制
- 数据可视化|几款免费在线甘特图工具
- HTML+Js实战项目|在网页中实现icon小图标的几种方法
- 如何修改网页小图标,浏览器页面上的图标。