【CSSだけで】ホバー時に黒透過と白文字を表示させる

<div class="hoverMask-parent">//被せたいエリア
     <img class="" src="./images/pickup1.jpg" alt="">
     <p class="hoverMask">//マスク本体
            View More　//ホバー時のテキスト
      </p>
</div>

.hoverMask-parent{
  position: relative;  //基準
  overflow: hidden;
}

.hoverMask{
  opacity: 0;  //この切替で表示非表示（非表示状態）
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0,0,0,0.5);
  display: flex; //白文字の中央揃え用
  justify-content: center; //白文字の中央揃え用
  align-items: center; //白文字の中央揃え用
  color: #fff; //白文字
  text-align: center; //白文字の中央揃え用
  transition:all 0.6s ease;  //ふわっとアニメーション
}

.hoverMask:hover{
  opacity: 1;  //この切替で表示非表示（表示状態）
}