2022/2/4 （更新日: 2022/2/12）

カード型レイアウトでよく使う定番のマウスホバーパターン４選

CSS

カード型レイアウトでのマウスホバーってどんなのがあるの？

そんな疑問にお答えします。

画像や四角形の要素がきれいに並んだレイアウトを「カード型レイアウト」と呼びます。

ブログ記事一覧などはこのレイアウトが多いです。

このカードにリンクを仕込む形となりますが、その場合必要となるのがホバーです。

ホバー時の動きは特に指示がなければ自分でつけることになります。

その場合その都度考えるのも時間のロスなので、あらかじめ決めておいた方が作業ははかどります。

今回は４パターン紹介します。

何かの参考になれば幸いです。

1 透過
2 背景色を変更
3 画像を拡大
4 ふわっと浮かせる

透過

ホバーアクションといえばまず思い浮かぶのがこの透過ですね。

使う機会は非常に多いです。

一番無難なチョイスだと思います。

ただカードの色合いや透過の割合によってはホバーしているのがわかりにくい場合もありますので、確認はしっかりしましょう。

See the Pen
ホバーアクション1 by toshi (@toshi78)
on CodePen.

.hoge-item-link {
  display: block;
  color: #333;
  background-color: #f2f2f2;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease 0s;
}


.hoge-item-link:hover {
  opacity: 0.6;
}

transition: all 0.3s ease 0s; と opacity: 0.6; がポイントです。

背景色を変更

カードの背景色を変える方法です。

画像が大部分だとちょっとわかりにくいかもしれません。

See the Pen
ホバーアクション2 by toshi (@toshi78)
on CodePen.

.hoge-item-link {
  display: block;
  color: #333;
  background-color: #f2f2f2;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease 0s;
}


.hoge-item-link:hover {
  background-color: #fff;
}

background-color: #fff; で背景色を変えています。

画像を拡大

ホバーすると画像が拡大します。

これもよく見かける方法ですね。

See the Pen
ホバーアクション3 by toshi (@toshi78)
on CodePen.

.hoge-item-picture {
  overflow: hidden;
}

.hoge-item-picture img {
  display: block;
  width: 100%;
  height: auto;
  transition: all 0.5s ease 0s;
}

.hoge-item-link:hover .hoge-item-picture img {
  transform: scale(1.2);
}

ポイントは overflow: hidden; です。

これがないと画像が親要素からはみ出てしまいます。

transform: scale(1.2); で画像を拡大しています。

ふわっと浮かせる

これもよく見かけますね。

ふわっと加減は人それぞれです。

See the Pen
ホバーアクション4 by toshi (@toshi78)
on CodePen.

.hoge-item-link {
　　display: block;
　　color: #333;
　　background-color: #f2f2f2;
　　box-shadow: 0 2px 5px rgba(0, 0, 0, .13);
　　transition: all 0.3s ease 0s;
}


.hoge-item-link:hover {
　　box-shadow: 0 4px 20px rgba(0,0,0,0.25);
　　transform: translateY(-5px);
}

box-shadow の変化と transform: translateY(); による縦の動きによりふわっと浮かせることができます。

意外に簡単にできます。

他にもいろんなホバーアクションがありますが、定番はこのあたりかと思います。

実際に使いながら慣れていきましょう。

以上です。