我正在尝试在行中的图像上显示颜色叠加层和文本。这是我到目前为止的内容：
#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和可见性隐藏的情况下进行游戏，但是显然我弄乱了某些东西。
答案 0 :(得分：2)
我做了什么？：
1-直接在DIV叠加层上插入标题
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>