CSS Web制作

【CSS】画像をhoverしたら透過させた黒いマスクをかけて文字を表示させる方法

※ 当サイトではアフィリエイト広告を利用しています

画像をhoverしたら黒いマスクかけて文字を表示させたいけど、どうしたらいい?

これは実務でも良くあるので、必ず出来るようにしておきましょう。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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

今回は以下の2つをご紹介します。

  1. hoverしたら文字を表示
  2. 文字は最初から表示

 

hoverしたら文字を表示させる場合

まずはHTMLから見ていきます。

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

次にCSSです。

.sample-img {
  cursor: pointer;
  max-width: 500px;
  position: relative;
  width: 100%;
}
.sample-img 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%; /* テキストを横幅いっぱいにならないようにする */
}

基本的にはコピペして貰えれば使えますが、画像のサイズ、文字の幅などは適宜変更して下さい。

こちらがサンプルになります。

See the Pen
画像にマスク
by junpei (@junpei-sugiyama)
on CodePen.

 

文字は最初から表示させる場合

次は文字は最初から表示させたい場合です。

実務ではこちらの方がよく使う気がします。

コードは先ほどと少し異なります。

<div class="sample-img">
  <img src="画像パス" alt="">
  <p>
    テキストが入ります。
  </p>
</div>
.sample-img {
  cursor: pointer;
  max-width: 500px;
  position: relative;
  width: 100%;
}
.sample-img img {
  height: auto;
  width: 100%;
}
.sample-img::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%;
}
.sample-img:hover::before {
  opacity: 1; /* hoverしたら透過しない(表示させる) */
}
.sample-img 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%; /* テキストを横幅いっぱいにならないようにする */
}

今回のマスクは擬似要素を使っています。

それに伴いマスクのdivタグはないので、pタグをposition: absolute;で画像の中央に配置しています。

こちらがサンプルになります。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

まとめ

今回は画像をhoverしたら透過させた黒いマスクをかけて文字を表示させる方法を解説しました。

実務でもわりとよくある実装なので、実装できるようにしておくといいと思います。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作