Html 悬停效果问题-悬停效果消失

我有一个问题与网页的悬停效果有关

我有一张图片，下面是图片的文字描述。当鼠标指针悬停在图片上时，图片应该消失，图片的文本描述应该出现——在本例中，我的代码可以工作

但是当鼠标指针悬停在文本描述上时，图片将重新出现，文本描述将消失。我不希望这种情况发生。有人能帮我吗

在线代码：

.住宅说明{
填充：51px 170px 0px 170px；
}
.home description p{
字体系列：'Lato'；
字体大小：300；
字体大小：20px；
颜色：#333333；
线高：25px；
}
.img___包装{
位置：相对位置；
}
p、 img___描述{
不透明度：0；
位置：绝对位置；
底部：45%；
左：0；
右：0；
文本对齐：居中；
保证金：0自动；
字体系列：'Lato'；
字体大小：300；
字体大小：25px；
颜色：#000000；
线高：35px；
文本转换：大写；
}
.悬停图像：悬停{
不透明度：0；
}
.hover img:hover+.img\u说明{
不透明度：1；
} 

.home说明{
填充：51px 170px 0px 170px；
}
.home description p{
字体系列：'Lato'；
字体大小：300；
字体大小：20px；
颜色：#333333；
线高：25px；
}
.img___包装{
位置：相对位置；
}
p、 img___描述{
不透明度：0；
位置：绝对位置；
底部：45%；
左：0；
右：0；
文本对齐：居中；
保证金：0自动；
字体系列：'Lato'；
字体大小：300；
字体大小：25px；
颜色：#000000；
线高：35px；
文本转换：大写；
}
.悬停图像：悬停{
不透明度：0；
}
.hover img:hover+.img\u说明{
不透明度：1；
} 
.offers主页：hover.hover img{
不透明度：0；
} 
.offers主页：hover.hover img+.img_uudescription{
不透明度：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>

.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;
} 

.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;
}