二级菜单

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>二级菜单</title>

<style type="text/css">

.box{

width: 200px;

height: 300px;

margin: 50px auto 0;

border: 1px solid #000;

position: relative;

/*overflow: hidden;*/

}

.box img{

width: 200px;

height: 300px;

}

.box .pic_info{

width: 200px;

height: 200px;

background-color: #000;

color: #fff;

position: absolute;

left: 200px;

top: 0px;

/*transition: all 500ms ease;*/

background-color: rgba(0,0,0,0.5);

display: none;

}

.box:hover .pic_info{

/*top: 150px;*/

display: block;

}

.box .pic_info p{

margin: 20px;

line-height: 30px;

}

</style>

</head>

<body>

<div class="box">

<img src="img图片/111.png" alt="宝贝">

<div class="pic_info">

<p>图片说明:这是我宝贝</p>

</div>

</div>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容