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

PCでマウスを乗せたときに、黒の透明な背景になって白文字が浮かびあがるエフェクトのやり方です。

単に透過するだけならopacityの値を変えるだけですが、今回は色も変えて文字も表示させます。

See the Pen
hoverMask by mskyw (@kyswm)
on CodePen.

<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;  //この切替で表示非表示（表示状態）
}

色を黒以外・透過度を変えたいときはbackground: rgba(0,0,0,0.5);の値を変えてください。

カードやボタンなどのリンク箇所でエフェクトがあるとクリックできるところなんだなというのがわかりやすいですよね。

ちょっと上品な感じにしたいときにいいかなと思います。