当鼠标停留在这张图片时 显示一个透明的div 里面有文字信息 不用js 要求只能html css
那个透明的盒子是单独写的，写好后，使用绝对定位将其移到图片盒子区域外（比如说left:9999px;），图片要求使用overflow:hidden;，这样刚开始的时候就看不见文字，
然后给图片添加hover伪类，改成你需要定位的值，鼠标移上去显示出来，，要慢慢下滑出来或者其他动态出来，使用css的过渡效果就行了
然后给图片添加hover伪类，改成你需要定位的值，鼠标移上去显示出来，，要慢慢下滑出来或者其他动态出来，使用css的过渡效果就行了
温馨提示：答案为网友推荐，仅供参考
第1个回答 2019-06-15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {box-sizing: border-box;margin: 0;padding: 0}
.box, .aa img{width: 250px;height: 350px;overflow: hidden;} /*范围之外不可见*/
.text {
background: rgba(0,0,0,.5);
padding: 10px;
color:#fff;
font-size: 20px;
position: relative;
margin-top: 0; /*text默认处于aa盒子下面,所以不可见*/
transition: .5s} /*transition为过渡动画效果，时间0.5秒*/
.box:hover .text {margin-top: -72px} /*鼠标经过box, 则text逐渐上移到aa范围内*/
.text span {font-size: 16px;color: #655c5c}
.text img {width: 100%}
</style>
</head>
<body>
<div class="box">
<div class="aa">
<img src="http://www.nanningsn.com/uploadfiles/adver/pro-07.jpg">
</div>
<div class="text">
<p>我是隐藏的DIV标题</p> <span>我也是隐藏的内容介绍</span>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {box-sizing: border-box;margin: 0;padding: 0}
.box, .aa img{width: 250px;height: 350px;overflow: hidden;} /*范围之外不可见*/
.text {
background: rgba(0,0,0,.5);
padding: 10px;
color:#fff;
font-size: 20px;
position: relative;
margin-top: 0; /*text默认处于aa盒子下面,所以不可见*/
transition: .5s} /*transition为过渡动画效果，时间0.5秒*/
.box:hover .text {margin-top: -72px} /*鼠标经过box, 则text逐渐上移到aa范围内*/
.text span {font-size: 16px;color: #655c5c}
.text img {width: 100%}
</style>
</head>
<body>
<div class="box">
<div class="aa">
<img src="http://www.nanningsn.com/uploadfiles/adver/pro-07.jpg">
</div>
<div class="text">
<p>我是隐藏的DIV标题</p> <span>我也是隐藏的内容介绍</span>
</div>
</div>
</body>
</html>
采纳吧，好用的话给个赞，也希望和大家一起讨论私聊，
