文字浮在图片上方,且在鼠标悬停在图片上时文字显示
时间: 2024-09-17 22:00:45 浏览: 39
css实现文字层浮在图片之上示例代码
这种效果通常在网页设计中实现,被称为“标题叠加”或者“图像标题提示”。它通过HTML、CSS和JavaScript结合来完成。下面是基本步骤:
1. HTML结构:创建一个包含图片 `<img>` 和隐藏的文字 `<span>` 的元素,通常是这样的结构:
```html
<div class="image-container">
<img src="image.jpg" alt="图片描述">
<span class="caption hidden">图片上方的文字</span>
</div>
```
2. CSS样式:首先让文字隐藏,并设置图片浮动位置(如`position: relative;`),然后将文字绝对定位在图片下方:
```css
.image-container {
position: relative;
}
img {
display: block;
position: relative;
overflow: hidden; /* 防止内容溢出 */
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7); /* 遮罩层颜色 */
color: #fff;
padding: 10px;
transition: opacity 0.3s ease-in-out;
pointer-events: none; /* 悬停时才触发 */
}
.hidden {
opacity: 0;
}
```
3. JavaScript (可选):当鼠标悬停在图片上时,隐藏文字的`opacity`属性变为1,显示文字:
```javascript
const imageContainer = document.querySelector('.image-container');
imageContainer.addEventListener('mouseover', () => {
imageContainer.querySelector('.caption').classList.remove('hidden');
});
imageContainer.addEventListener('mouseout', () => {
imageContainer.querySelector('.caption').classList.add('hidden');
});
```
阅读全文