<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>十种图片hover效果</title>
</head>
<style>
/*可视化窗口*/
.d{
width:400px;
height:300px;
margin:auto;
overflow:hidden;/*溢出隐藏*/
position:relative;/*父元素相对定位*/
}
/*蒙版效果*/
.d>div{
width:100%;
height:100%;
text-align:center;/*字体水平居中*/
line-height:300px;/*字体垂直居中 */
position:absolute;/*子元素绝对定位*/
transition:all 300ms linear;/*过渡属性*/
}
.img{
width:100%;
height:100%;
top:0;
left:0;
position:absolute;/*图片绝对定位*/
transition:all 300ms linear;/*过渡属性*/
}
/***************图片中hover效果第一种***************/
/*鼠标悬停1照片位置*/
.d1:hover>img{
top:-100%;
}
/*蒙版效果*/
.d1>div{
background-color:rgb(0,255,0);
opacity:0;/*透明度完全透明*/
left:0; /*调整位置*/
top:-100%; /*调整位置*/
}
/*鼠标悬停蒙版透明*/
.d:hover>div{
top:0;
opacity:1;/*透明度完全不透明*/
}
/***************图片中hover效果第二种***************/
/*鼠标悬停2照片位置*/
.d2:hover>img{
transform:perspective(600px) rotateY(-35deg);
}
/*蒙版效果*/
最低0.47元/天 解锁文章
扫一扫
08-25
5165
5165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
