在网页设计中，经常需要在图片上添加一些说明文字，让用户更加直观地理解图片所要表达的内容。而使用CSS可以轻松实现对于图片的文字提示。下面是实现过程：

.img-wrap {
position: relative;
display: inline-block;
 }
 .img-wrap:hover .img-text {
display: block;
 }
 .img-text {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
z-index: 999;
 }

首先，对于外层容器设置 relative 定位，内部文字提示容器设置成 absolute 定位。然后，给文字提示容器设置 display:none，当鼠标经过图片容器时，触发 hover 事件，将文字提示容器的 display:block 即可。

需要注意的是， 还需要通过设置z-index属性使文字提示框在上方显示，避免出现被图片覆盖的情况。

这种方法既简单又实用，能够提高网站的用户体验，强烈推荐大家在实际应用中多加尝试。