ホバーしたときに黒背景と文字をつける方法

こんにちは！

11連休だった長いGWが終わってしまいました。休日って本当に体感時間が早いですよね。光の速さで過ぎていきましたヽ(；▽；)ノ

このご時世ですしゆっくり過ごせたので、今日からまた少しづつエンジンをかけていこうと思います。

では、本題に入りますね。
今日は「ホバーしたときに黒背景と文字をつける方法」についてです。

言葉ではわかりづらいので画像貼りますね！
このように写真付きリストを作りました。（いつもは猫の画像が多いのでサンドウィッチにしてみました笑）

この画像またはタイトルをホバーすると黒背景の上に白テキストが浮かび上がるようにします！

これはあくまで例なのですがこのレイアウトはデザイン的にどうなんでしょうね？(°_°)

あと、考え方ですが、普通の状態ではテキストは非表示にしてホバー時のみ表示させるとうまくいきそうです＾＾

では、いつものようにコーディングをのせていきます〜

コーディング

HTML編

        <ul class="menuList">
          <li>
            <a href="#">
              <div class="photoBlock">
                <div class="thumb"><img src="assets/images/sandwich01.jpg" alt=""></div>
                <div class="catchBox">
                  <div class="txt">コーヒーとハムサンド</div>
                </div>
              </div>
              <div class="tit">モーニングセット</div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="photoBlock">
                <div class="thumb"><img src="assets/images/sandwich01.jpg" alt=""></div>
                <div class="catchBox">
                  <div class="txt">コーヒーとハムサンド</div>
                </div>
              </div>
              <div class="tit">モーニングセット</div>
            </a>
          </li>
          <li>
            <a href="#">
              <div class="photoBlock">
                <div class="thumb"><img src="assets/images/sandwich01.jpg" alt=""></div>
                <div class="catchBox">
                  <div class="txt">コーヒーとハムサンド</div>
                </div>
              </div>
              <div class="tit">モーニングセット</div>
            </a>
          </li>
        </ul>

今回はいつもより記述量多めです^_^;

ホバー領域を広くするために<a>タグの中にタイトルを入れています。
表示・非表示を調整する部分が【catchBox】クラスです。

CSS編

.menuList {
  display: flex;
  margin: 0px -20px;
}

.menuList > li {
  box-sizing: border-box;
  width: 33.333%;
  padding: 0 20px;
}

.menuList a {
  display: block;
  text-decoration: none;
}

.menuList .photoBlock {
  position: relative;
}

.menuList .catchBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 0.2s ease;
  opacity: 0;
}

.menuList a:hover .catchBox {
  opacity: 1;
}

.menuList .txt {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.menuList .tit {
  text-align: center;
  font-size: 16px;
  margin-top: .3em;
}

考え方としては、

です！

あと、応用ポイントとして、今回表示非表示の動きを滑らかにするためにtransitionをつけているのですが、つける場所が大事で、【a:hover】時の【catchBox】に指定するのではなく通常時の【catchBox】に書きます。

これは私自身指摘された箇所なのですが、【a:hover】時の【catchBox】に指定してしまうとホバー時にしかtransitionは効かなくなります。つまり、ホバーを外すときは効かないということですね(＞＜)

なのでtransitionの記述位置にも注意が必要です＾＾

気になった方は試してみてください！

では今日はここまで〜〜