设计一个样式出来,鼠标移到图片的上方会有蒙层出现,并且会显示两个按钮出来
时间: 2024-01-22 17:04:06 浏览: 45
好的,我来设计一个样式,如下所示:
HTML代码:
```html
<div class="image-container">
<img src="your-image-url" alt="your-image-description">
<div class="overlay">
<button class="btn btn1">按钮1</button>
<button class="btn btn2">按钮2</button>
</div>
</div>
```
CSS代码:
```css
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
opacity: 1;
}
.overlay button {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
color: #000;
cursor: pointer;
}
.overlay .btn1 {
margin-top: 50%;
transform: translateY(-50%);
}
.overlay .btn2 {
margin-top: 10px;
}
```
在上述代码中,我们创建了一个包含图片和蒙层的容器。当鼠标移到容器上时,蒙层的透明度变为1,即显示出来。蒙层中包含两个按钮,分别是“按钮1”和“按钮2”。这些按钮都是在蒙层内部居中显示的,并且“按钮1”在垂直方向上居中,而“按钮2”则在“按钮1”的下方。当鼠标移开容器时,蒙层的透明度变为0,即隐藏起来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.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)