【CSS】画像をhoverしたら透過させた黒いマスクをかけ、テキストを表示させる方法

<div class="img-wrapper">
  <img src="画像パス" alt="">
  <div class="hover-mask">
    <p>
      テキストが入ります。
    </p>
  </div>
</div>

.img-wrapper {
  cursor: pointer;
  max-width: 500px;
  position: relative;
  width: 100%;
}
.img-wrapper img {
  height: auto;
  width: 100%;
}
.hover-mask {
  align-items: center;/* テキストの中央揃え */
  background: rgba(0, 0, 0, .5);/* マスクの色(黒の50%) */
  bottom: 0;
  color: #fff;/* テキストの色 */
  display: flex;/* テキストの中央揃え */
  height: auto;
  justify-content: center;/* テキストの中央揃え */
  left: 0;
  opacity: 0;/* 最初は透明（非表示） */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease;/* ゆっくりopacityのみへ変化させる */
  width: 100%;
}
.hover-mask:hover {
  opacity: 1;/* hoverしたら透過しない(表示させる) */
}
.hover-mask p {
  width: 80%;/* テキストを横幅いっぱいにならないようにする */
}

<div class="img-wrapper">
  <img src="画像パス" alt="">
  <p>
    テキストが入ります。
  </p>
</div>

.img-wrapper {
  cursor: pointer;
  max-width: 500px;
  position: relative;
  width: 100%;
}
.img-wrapper img {
  height: auto;
  width: 100%;
}
.img-wrapper::before {
  background: rgba(0, 0, 0, .5);/* マスクの色(黒の50%) */
  bottom: 0;
  content: '';
  height: auto;
  left: 0;
  opacity: 0;/* 最初は透明（非表示） */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity .6s ease;/* ゆっくりopacityのみへ変化させる */
  width: 100%;
}
.img-wrapper:hover::before {
  opacity: 1;/* hoverしたら透過しない(表示させる) */
}
.img-wrapper p {
  align-items: center;/* テキストの中央揃え */
  bottom: 0;
  color: #fff;/* テキストの色 */
  display: flex;/* テキストの中央揃え */
  justify-content: center;/* テキストの中央揃え */
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;/* テキストを横幅いっぱいにならないようにする */
}