鼠标悬停后图片显示文字
Image 1
瓜皮之牙
HTML代码：
<div class="card" style="width: 35rem;">
<div class="imagesss-container">
<img src="https://files.getquicker.net/_sitefiles/_guides/52593d69-c99a-4367-8b98-08d9a65be47e/2023/08/25/211324_202824_5.jpg" alt="Image 1" style="width: 100%; height:300px ; object-fit: cover;">
<div class="tooltip">瓜皮之牙</div>
</div>
</div>
CSS代码：
<!-------------鼠标移动到图片上显示文字---------------->
<style>
.imagesss-container {
position: relative;
display: inline-block;
}

.imagesss-container .tooltip {
position: absolute;
bottom: 0%;  /* 控制半透明底色的高度位置 /
left: 0;  / 如果修改这里的数值，下面的半透明的数值也要对应修改（多尝试几次） /
width: 100%; / 见上 /
background-color: rgba(0, 0, 0, 0.7);
color: #FFF;
text-align: center;
padding: 15px; / 半透明底色高度 */
opacity: 0;
transition: opacity 0.8s ease;
}


.imagesss-container:hover .tooltip {
opacity: 1;
}
</style>
<!-------------鼠标移动到图片上显示文字---------------->

提示：如果图片没有自适应拉伸宽度，删除下面的CSS代码即可。

.imagesss-container {
position: relative;
display: inline-block;
}