css是网页设计中必不可少的一部分，它可以美化页面、改变元素样式等。而鼠标移动到图片上出现文字效果是一种常见的交互方式，能够提升用户体验，增加页面的互动性。下面将介绍如何使用css实现这种效果。
1.html结构
首先，在html中需要先创建一个包含图片和文字的容器。这可以通过一个div元素来实现。例如：
```html
```
在这个例子中，我们使用了一个img元素来显示图片，并使用一个p元素来显示图片的描述文字。同时，给这个容器添加了一个类名为"image-container"，以方便后续的样式设置。
2.css样式
接下来，我们需要给容器和文字添加一些css样式，来实现鼠标移动时文字的显示与隐藏。例如：
```css
.image-container{
position:relative;
display:inline-block;
}
.caption{
position:absolute;
top:0;
left:0;
background-color:rgba(0,0,0,0.8);
color:#fff;
padding:10px;
opacity:0;
transition:opacity0.3sease-in-out;
}
.image-container:hover.caption{
opacity:1;
}
```
在这个例子中，我们给图片容器设置了`position:relative;`，以便对其内部元素进行定位。同时，给文字容器添加了`position:absolute;`，使其脱离正常的文档流，并使用`top:0;left:0;`将其定位到容器的左上角。
我们还给文字容器设置了一个背景颜色和文字颜色，同时添加了一些padding来增加文字容器的可读性。初始时，文字容器的透明度为0，通过`opacity`属性实现。最后，通过`transition`属性设置过渡效果，以平滑地显示和隐藏文字。当鼠标移动到图片容器上时，通过`:hover`伪类选择器来改变文字容器的透明度，从而实现文字的显示与隐藏。
3.应用效果
完成上述html结构和css样式后，我们就可以在网页中应用这个效果了。只需要将相应的代码复制粘贴到你的网页中即可。
总结：
通过使用css，我们可以很容易地实现鼠标移动到图片上出现文字的效果。通过合理的html结构和css样式，我们可以实现更多的交互效果，提升用户体验。希望本文对你有所帮助，如果还有其他问题，请随时提问。
