ホバー時に画像にテキストとオーバーレイを配置するにはどうすればよいですか？

#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>