我要做一个网页,包含10个图片,排列成两行五列,当鼠标悬浮在某个图片上时,会显示其图片介绍,你可以帮我写一下吗
时间: 2024-01-11 16:03:23 浏览: 22
当然可以,以下是一个简单的实现方式:
```html
<!DOCTYPE html>
<html>
<head>
<title>图片展示</title>
<style type="text/css">
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
margin: 10px;
width: 150px;
height: 150px;
position: relative;
cursor: pointer;
}
.item img {
width: 100%;
height: 100%;
}
.item .overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 16px;
text-align: center;
padding-top: 50px;
box-sizing: border-box;
}
.item:hover .overlay {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="image1.jpg" alt="image1">
<div class="overlay">图片1介绍</div>
</div>
<div class="item">
<img src="image2.jpg" alt="image2">
<div class="overlay">图片2介绍</div>
</div>
<div class="item">
<img src="image3.jpg" alt="image3">
<div class="overlay">图片3介绍</div>
</div>
<div class="item">
<img src="image4.jpg" alt="image4">
<div class="overlay">图片4介绍</div>
</div>
<div class="item">
<img src="image5.jpg" alt="image5">
<div class="overlay">图片5介绍</div>
</div>
<div class="item">
<img src="image6.jpg" alt="image6">
<div class="overlay">图片6介绍</div>
</div>
<div class="item">
<img src="image7.jpg" alt="image7">
<div class="overlay">图片7介绍</div>
</div>
<div class="item">
<img src="image8.jpg" alt="image8">
<div class="overlay">图片8介绍</div>
</div>
<div class="item">
<img src="image9.jpg" alt="image9">
<div class="overlay">图片9介绍</div>
</div>
<div class="item">
<img src="image10.jpg" alt="image10">
<div class="overlay">图片10介绍</div>
</div>
</div>
</body>
</html>
```
在这个例子中,我们使用了 `flex` 布局来实现图片的排列。每个图片都是一个 `.item` 容器,包含一个图片和一个遮罩层 `.overlay`。通过 `:hover` 伪类来控制遮罩层的显示和隐藏。当鼠标悬浮在某个 `.item` 容器上时,它内部的 `.overlay` 就会显示出来,显示图片的介绍信息。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)