Solution 1 :

What i did?:

1 – Insert title directly on DIV overlay
2 – I delete part of your code (#gallery-1 .gallery .gallery-item .overlay-shade class)
3 – Add a new class just for the overlay effect(.overlay-shade class) and for fade in the overlay title(gallery-item:hover .overlay-shade class).

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

Problem :

I am trying to display a color overlay and text on my images in the row. This is what I have this so far:

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

So I managed to display the overlay, but I cannot get the title to show up. I would like to display it in the center of the image. And I would like the overlay to be the same size as the image.
I tried to play with opacity 0 and visiblity hidden, but obviously I messed up something.

Comments

Comment posted by PapT

Thanks Simone. Is it possible to push the text to the middle?

Comment posted by bill.gates

@PapT add to the class

By

Leave a Reply

Your email address will not be published. Required fields are marked *