1.首先看看HTML、一个img图像控件和一个带掩码样式的div，其中包含文本。这是蒙版层。
2.然后，查看样式定义。首先，查看图像容器和图像的样式，如图所示。这主要是准备我们的绝对定位口罩。
3.看看蒙版层的样式定义。代码如图所示。
背景:rgba(0,0,0,0.7)
透明度可以通过修改后面的0.7号来改变。1是完全不透明的，0是完全透明的。
4.然后添加用于鼠标移动的脚本代码来显示蒙版层。这段js代码是用jquery编写的，既方便又简单，所以我们首先介绍jquery脚本库。
5.添加mouseover和mouseout事件，主要是当鼠标移动到图像容器上时显示蒙版层，当鼠标移出时隐藏蒙版层。
6.刷新页面，您可以看到页面上显示的正常图片。
7.当我们把鼠标放在蒙版层上时，蒙版层就会显示出来。
1.新建html文档,在body标签中添加一个div标签,然后在div标签中添加p标签,为p标签添加内容:
2.
为了方便演示,给div标签设置宽高和背景颜色,然后给p标签设置“display”属性,属性值为“none”,这样p标签中的文字默认情况下不会显示:
3.
给div设置hover伪类,当鼠标移动到div区域时,设置p标签的样式为块级元素“block”:
4.
这样当鼠标移动到div上时就会显示p标签内容,鼠标离开就不显示p标签内容:
我想你这个问题描述的不是太清晰吧，我猜想你是想说鼠标经过图片的时候在图片的底部显示描述性文字吧？
这个实现起来非常困难，你应该也了解，css可以通过伪类实现一些互动效果，但是所有这些互动效果都有一个很大的限制，通过伪类只能实现事件发生元素本身的特效，比如，我们通过纯css不可能实现你点击一个按钮而改变一个文本框的背景色；
不过这个问题你只需稍微使用一点js就可以轻松搞定的；
不过按照你的要求，使用纯css，我给出的两种实现方式；
第一种：
<html>
<style type="text/css">
div{
width: 200px
height: 200px
margin:50px
background: #888
}
a{
display: block
width: 200px
height: 200px
text-indent: -9999px
background-image: url("./1.jpg")
}
a:hover{
text-indent: 10px
white-space: nowrap
text-overflow: clip
overflow: hidden
vertical-align: bottom
line-height:370px
color: #111
text-decoration: none
}
</style>
<body>
<div>
<a href="#">
河南人网上晒幸福 称幸福是早喝胡辣汤
</a>
</div>
<body>
</html>
第二种：
<html>
<style type="text/css">
div{
width: 200px
height: 200px
margin: 50px
background: #888
position: relative
}
img{
width:200px
height: 200px
}
a{
display: block
position: absolute
width: 200px
height: 200px
top: 0
left: 0
text-indent: -9999px
}
a:hover{
color: orange
text-decoration: none
white-space: nowrap
text-indent:10px
overflow: hidden
line-height: 370px
}
</style>
<body>
<div>
<img src="./1.jpg" />
<a href="#">
河南人网上晒幸福 称幸福是早喝胡辣汤
</a>
</div>
<body>
</html>
不过这两种方法与js实现方式相比很不实用，而且弊端较多，例如文字只能显示一行，最后文字的切割痕迹无法消除，网页内容与表现无法截然分离，所以纯css的实现基本上不会在专业的网站上使用。
但愿以上回答能让你满意。
