css实现鼠标放上去后下拉动画

最新推荐文章于 2022-04-06 11:04:11 发布

blorse2

最新推荐文章于 2022-04-06 11:04:11 发布

阅读量913

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/blorse2/article/details/51804268

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>鼠标移动图片上显示下拉半透明框</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="box">
<div class="title">
<span>游戏设计</span>
<a href="">更多></a>
</div>
<ul>
<li>
<div class="info">
<h2>怒刷装备</h2>
<p>我一直在寻找，油腻的师姐在哪里？</p>
<a href="">开始游戏</a>
</div>
<img src="images/1.jpg" width="160px" height="240px" alt="游戏图片" />
</li>
<li>
<div class="info">
<h2>怒刷装备</h2>
<p>我一直在寻找，油腻的师姐在哪里？</p>
<a href="">开始游戏</a>
</div>
<img src="images/1.jpg" width="160px" height="240px" alt="游戏图片" />
</li>
<li>
<div class="info">
<h2>怒刷装备</h2>
<p>我一直在寻找，油腻的师姐在哪里？</p>
<a href="">开始游戏</a>
</div>
<img src="images/1.jpg" width="160px" height="240px" alt="游戏图片" />
</li>
<li>
<div class="info">
<h2>怒刷装备</h2>
<p>我一直在寻找，油腻的师姐在哪里？</p>
<a href="">开始游戏</a>
</div>
<img src="images/1.jpg" width="160px" height="240px" alt="游戏图片" />
</li>
<li>
<div class="info">
<h2>怒刷装备</h2>
<p>我一直在寻找，油腻的师姐在哪里？</p>
<a href="">开始游戏</a>
</div>
<img src="images/1.jpg" width="160px" height="240px" alt="游戏图片" />
</li>
<li>
<div class="info">
<h2>怒刷装备</h2>
<p>我一直在寻找，油腻的师姐在哪里？</p>
<a href="">开始游戏</a>
</div>
<img src="images/1.jpg" width="160px" height="240px" alt="游戏图片" />
</li>
<li>
<div class="info">
<h2>怒刷装备</h2>
<p>我一直在寻找，油腻的师姐在哪里？</p>
<a href="">开始游戏</a>
</div>
<img src="images/1.jpg" width="160px" height="240px" alt="游戏图片" />
</li>
<li>
<div class="info">
<h2>怒刷装备</h2>
<p>我一直在寻找，油腻的师姐在哪里？</p>
<a href="">开始游戏</a>
</div>
<img src="images/1.jpg" width="160px" height="240px" alt="游戏图片" />
</li>

</ul>
</div>
</body>
</html>

______________________________________________________css___________________________________________________________

@charset "utf-8";
/* CSS Document */

*{
margin:0px;
padding:0px;
}
a{
color:#CCC;
text-decoration:none;
}
body{
font-family:微软雅黑,Arial;
background:#CCC;
}

.box{
width:760px;
height:550px;
margin:0 auto;
padding:20px;
background:#fff;
margin-top:20px;
overflow:hidden;
}
.box .title span{
font-size:16px;

}
.box .title a{
float:right;
display:block;
font-size:10px;
}

.box .title a:hover{
color:red;
text-decoration:underline;
}

.box ul{
margin-top:20px;

}

.box ul li{
float:left;
list-style:none
width:160px ;
height:240px;
margin-right:20px;
margin-bottom:20px;
list-style:none;
position:relative;
overflow:hidden;

}
.box ul li:nth-child(4n){
margin-right:0px;
}
.box ul li .info{
width:160px;
height:240px;
background:rgba(0,0,0,0.7);
color:#fff;
position:absolute;
top:-240px;
transition:all 0.3s ease;

}
.box ul li .info h2{
font-size:16px;
text-align:center;
margin:10px;

}
.box ul li .info p{
text-align:center;
padding:0 10px;
margin:20px 0px;
}

.box ul li .info a{
display:block;
height:40px;
width:100px;
line-height:40px;
font-size:15px;
text-align:center;
color:#fff;
background:#F96;
margin:0 auto;

}
.box ul li:hover .info{
top:0px;
}