web前端Hoverbox图像画廊代码
时间: 2024-02-17 08:05:36 浏览: 26
好的,以下是一个简单的Hoverbox图像画廊代码,希望对您有所帮助:
HTML代码:
```html
<div class="gallery">
<div class="gallery-item">
<img src="image1.jpg" alt="Image 1">
<div class="overlay">
<div class="text">Image 1</div>
</div>
</div>
<div class="gallery-item">
<img src="image2.jpg" alt="Image 2">
<div class="overlay">
<div class="text">Image 2</div>
</div>
</div>
<div class="gallery-item">
<img src="image3.jpg" alt="Image 3">
<div class="overlay">
<div class="text">Image 3</div>
</div>
</div>
</div>
```
CSS代码:
```css
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery-item {
position: relative;
flex: 1 0 300px;
margin: 10px;
}
.gallery-item img {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}
.gallery-item:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
```
这个Hoverbox图像画廊是一个基本的示例,当鼠标移动到图像上时,会显示一个半透明的遮罩层和图像标题。您可以根据需要更改CSS样式或添加JavaScript交互效果来创建一个更复杂的画廊。