Hover effect problem - hover effect disappearing

Question

I have a problem that relates to a web page's hover effect.

I have a picture with a text description of the picture underneath. When the mouse pointer hovers on the picture, the picture should disappear and the text description of the picture should appear - in this case my code works.

But when the mouse pointer then hovers over the text description, the picture would reappear and the text description would disappear. I do not wish this to happen. Can someone help me?

Code Online: https://codepen.io/rlinkpl/pen/LYGQLja

<div class="container-fluid cont-fld">
        <div class="row mt-3">
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/ogrody-wertykalne/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/OGORDY-WERTYKLANE.jpg" class="img-fluid hover-img mt-4" alt="Ogrody wertykalne">
                        <p class="img__description">Ogrody wertykalne</p>
                    </a>
                </div>
            </div>
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/architektura-krajobrazu/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/ARCHITEKTURA-KRAJOBRAZU.jpg" class="img-fluid hover-img mt-4" alt="Architektura krajobrazu">
                        <p class="img__description">Architektura krajobrazu</p>
                    </a>
                </div>
            </div>
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/zielen-we-wnetrzach/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/ZIELEŃ-WE-WNĘTRZACH.jpg" class="img-fluid hover-img mt-4" alt="Zielenie we wnętrzach">
                        <p class="img__description">Zielenie we wnętrzach</p>
                    </a>
                </div>
            </div>
                    </div>
    </div>

.home-description{
   padding: 51px 170px 0px 170px;
}

.home-description p{
  font-family:'Lato';
  font-weight: 300;
  font-size: 20px;
  color: #333333;
  line-height: 25px;
}

.img__wrap {
  position: relative;
}

 p.img__description {
  opacity: 0;
  position: absolute;
  bottom: 45%;
  left: 0;
  right: 0;
  text-align: center;
  margin:0 auto;
  font-family:'Lato';
  font-weight: 300;
  font-size: 25px;
  color: #000000;
  line-height: 35px;
  text-transform: uppercase;
   
}

.hover-img:hover {
  opacity: 0;
}

.hover-img:hover + .img__description {
  opacity: 1;
} 

Answer 1

.img__description, .hover-img{
    transition: all 0.5s ease-in-out
}
.offers-homepage:hover .hover-img {
    opacity:  0;
}
.offers-homepage:hover .hover-img + .img__description {
    opacity:  1;
} 

Answer 2

.home-description{
   padding: 51px 170px 0px 170px;
}

.home-description p{
  font-family:'Lato';
  font-weight: 300;
  font-size: 20px;
  color: #333333;
  line-height: 25px;
}

.img__wrap {
  position: relative;
}

 p.img__description {
  opacity: 0;
  position: absolute;
  bottom: 45%;
  left: 0;
  right: 0;
  text-align: center;
  margin:0 auto;
  font-family:'Lato';
  font-weight: 300;
  font-size: 25px;
  color: #000000;
  line-height: 35px;
  text-transform: uppercase;
   
}

.hover-img:hover {
  opacity: 0;
}

.hover-img:hover + .img__description {
  opacity: 1;
} 

.offers-homepage:hover .hover-img { 
   opacity: 0; 
} 

.offers-homepage:hover .hover-img + .img__description { 
   opacity: 1; 
}

<div class="container-fluid cont-fld">
        <div class="row mt-3">
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/ogrody-wertykalne/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/OGORDY-WERTYKLANE.jpg" class="img-fluid hover-img mt-4" alt="Ogrody wertykalne">
                        <p class="img__description">Ogrody wertykalne</p>
                    </a>
                </div>
            </div>
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/architektura-krajobrazu/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/ARCHITEKTURA-KRAJOBRAZU.jpg" class="img-fluid hover-img mt-4" alt="Architektura krajobrazu">
                        <p class="img__description">Architektura krajobrazu</p>
                    </a>
                </div>
            </div>
                        <div class="col-lg-4">
                <div class="offers-homepage img__wrap">
                    <a href="http://clematis.rlink.it/zielen-we-wnetrzach/">
                        <img src="http://clematis.rlink.it/wp-content/uploads/2020/06/ZIELEŃ-WE-WNĘTRZACH.jpg" class="img-fluid hover-img mt-4" alt="Zielenie we wnętrzach">
                        <p class="img__description">Zielenie we wnętrzach</p>
                    </a>
                </div>
            </div>
                    </div>
    </div>