css切换图片和文字 |css如何给文字加中线

首先需要准备好两张不同的图片和对应的描述文本：

<div class="image-container">
<img src="image1.jpg">
<p>这是第一张图片的描述文本</p>
</div>
<div class="image-container">
<img src="image2.jpg">
<p>这是第二张图片的描述文本</p>
</div>

然后定义CSS样式，将图片的opacity属性设置为0，将文字的display属性设置为none，这样初始的时候图片是不可见的，而文字则会隐藏起来：

.image-container img {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.image-container p {
display: none;
transition: all 0.3s ease-in-out;
}

接下来，定义鼠标悬浮在图片上时的效果，在此时将图片的opacity属性设置为1，将文字的display属性设置为block，使得图片变得可见，文本也会显示出来：

.image-container:hover img {
opacity: 1;
}
.image-container:hover p {
display: block;
}

这样，当用户鼠标悬浮在图片上时，就可以看到对应的文本了。利用CSS的这个简单的技巧，可以实现很多有趣的网页效果。