html - 如何在悬停时在图像上放置文本和叠加层?
问题描述
我正在尝试在行中的图像上显示颜色叠加层和文本。到目前为止,这就是我所拥有的:
#gallery-1 {
padding-top: 60px;
padding-bottom: 60px;
background-color: #ffffff;
}
#gallery-1 .gallery {
margin-top: 45px;
}
#gallery-1 .section-title h2 {
text-align: center;
color: #333333;
text-transform: uppercase;
}
#gallery-1 .container-fluid {
padding-left: 0;
padding-right: 0;
}
#gallery-1 .gallery .gallery-item {
position: relative;
}
#gallery-1 .gallery .gallery-item-title h6 {
opacity: 0;
visibility: hidden;
}
#gallery-1 .gallery .gallery-item-title h6:hover {
position: absolute;
opacity: 1;
visibility: visible;
top: 0;
left: 0;
color: red;
z-index: 10000;
}
#gallery-1 .gallery .gallery-item .overlay-shade {
position: absolute;
display: inline-block;
vertical-align: middle;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 12;
background-color: #333;
opacity: 0;
}
#gallery-1 .gallery .gallery-item .overlay-shade:hover {
opacity: 0.9;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="gallery-1">
<div class="container-fluid gallery">
<div class="row no-gutters">
<div class="col-sm-3">
<div class="gallery-item">
<img src="https://cdn.pixabay.com/photo/2016/11/14/03/05/surgery-1822458_960_720.jpg" alt="" class="img-fluid">
<div class="overlay-shade"></div>
<div class="gallery-item-title">
<h6>Item title 1</h6>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="gallery-item">
<img src="https://cdn.pixabay.com/photo/2014/10/02/18/45/medical-consultation-470501_960_720.jpg" alt="" class="img-fluid">
<div class="overlay-shade"></div>
<div class="gallery-item-title">
<h6>Item title 2</h6>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="gallery-item">
<img src="https://cdn.pixabay.com/photo/2014/10/02/18/45/hall-470497_960_720.jpg" alt="" class="img-fluid">
<div class="overlay-shade"></div>
<div class="gallery-item-title">
<h6>Item title 3</h6>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="gallery-item">
<img src="https://cdn.pixabay.com/photo/2019/11/02/04/43/dentist-4595634_960_720.jpg" alt="" class="img-fluid">
<div class="overlay-shade"></div>
<div class="gallery-item-title">
<h6>Item title 4</h6>
</div>
</div>
</div>
</div>
</div> <!-- End .container-fluid -->
</section>
所以我设法显示叠加层,但我无法显示标题。我想将它显示在图像的中心。我希望叠加层与图像的大小相同。我试图玩不透明度 0 和隐藏可见性,但显然我搞砸了一些东西。
解决方案
我做了什么?:
DIV
1 - 直接在叠加层上插入标题
2 - 我删除了部分代码(#gallery-1 .gallery .gallery-item .overlay-shade
类)
3 - 为叠加效果(类)添加一个新类,.overlay-shade
并在叠加层标题(gallery-item:hover .overlay-shade
类)中淡入淡出。
#gallery-1 {
padding-top: 60px;
padding-bottom: 60px;
background-color: #ffffff;
}
#gallery-1 .gallery {
margin-top: 45px;
}
#gallery-1 .section-title h2 {
text-align: center;
color: #333333;
text-transform: uppercase;
}
#gallery-1 .container-fluid {
padding-left: 0;
padding-right: 0;
}
#gallery-1 .gallery .gallery-item {
position: relative;
}
#gallery-1 .gallery .gallery-item-title {
opacity: 0;
visibility: hidden;
}
#gallery-1 .gallery .gallery-item-title {
position: absolute;
opacity: 1;
visibility: visible;
top: 0;
left: 0;
color: red;
z-index: 10000;
}
#gallery-1 .gallery .gallery-item {
opacity: 0.9;
}
.overlay-shade {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
height: 100%;
}
.gallery-item:hover .overlay-shade {
opacity: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="gallery-1">
<div class="container-fluid gallery">
<div class="row no-gutters">
<div class="col-sm-3">
<div class="gallery-item">
<img src="https://cdn.pixabay.com/photo/2016/11/14/03/05/surgery-1822458_960_720.jpg" alt="" class="img-fluid">
<div class="overlay-shade">Item title 1</div>
<div class="gallery-item-title">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="gallery-item">
<img src="https://cdn.pixabay.com/photo/2014/10/02/18/45/medical-consultation-470501_960_720.jpg" alt="" class="img-fluid">
<div class="overlay-shade">Item title 2</div>
<div class="gallery-item-title">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="gallery-item">
<img src="https://cdn.pixabay.com/photo/2014/10/02/18/45/hall-470497_960_720.jpg" alt="" class="img-fluid">
<div class="overlay-shade">Item title 3</div>
<div class="gallery-item-title">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="gallery-item">
<img src="https://cdn.pixabay.com/photo/2019/11/02/04/43/dentist-4595634_960_720.jpg" alt="" class="img-fluid">
<div class="overlay-shade">Item title 4</div>
<div class="gallery-item-title">
</div>
</div>
</div>
</div>
</div> <!-- End .container-fluid -->
</section>
推荐阅读
- python - virtualenv 没有匹配的分布
- azure - 如何启用部署槽?
- c# - 向对象添加表示方向的向量
- powershell - PowerShell 无法在系统清理后“点源”配置文件
- java - 如何设计内部方法访问范围?
- python-2.7 - 如何对 ArcMap 中的多个 CAD 文件应用基准面调整?
- css - CSS Nav Bar 未使用 Flex 向右对齐
- solace - Solace Client BindFailedError 选择器无效:超过 1023 字节
- docusignapi - 需要包含指向发送 Docusign 请求的 Salesforce 页面的链接
- java - 来自wildfly 10的javax.net.ssl.SSLHandshakeException