Как разместить текст и наложение на изображение при наведении?

Question

Я пытаюсь отобразить цветной оверлей и текст на моих изображениях в строке. Вот что у меня есть:

#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 и скрытой видимостью, но, очевидно, что-то напортачил.

Answer 1

Что я сделал?:

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>