

カード型レイアウトでのマウスホバーってどんなのがあるの?
そんな疑問にお答えします。
画像や四角形の要素がきれいに並んだレイアウトを「カード型レイアウト」と呼びます。
ブログ記事一覧などはこのレイアウトが多いです。
このカードにリンクを仕込む形となりますが、その場合必要となるのがホバーです。
ホバー時の動きは特に指示がなければ自分でつけることになります。
その場合その都度考えるのも時間のロスなので、あらかじめ決めておいた方が作業ははかどります。
今回は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; がポイントです。
背景色を変更
カードの背景色を変える方法です。
画像が大部分だとちょっとわかりにくいかもしれません。
.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(); による縦の動きによりふわっと浮かせることができます。
意外に簡単にできます。
他にもいろんなホバーアクションがありますが、定番はこのあたりかと思います。
実際に使いながら慣れていきましょう。
以上です。
投稿者 トシ
コメントを残す