CSS応用編: ホバーエフェクト

以前作ったグリッドに、PC画面サイズの場合はマウスホバーで各種エフェクトが発生する設定を行っていきます。スマホ、タブレットの場合はスクロールでエフェクトが開始し、PC画面の場合はマウスホバーでエフェクトが開始するよう、今回紹介している各種:hover要素は全て@media screen and (min-width:1025px) で囲ってiPadサイズ以上の画面サイズは全てマウスホバーで反応するように設定しました。

各種設定

背景画像

背景画像は1.2倍にズームする設定です。:hover擬似クラスにはtransition要素で秒数など指定しなかったので、マウスホバー／ホバーアウト時共に.sample-bgに設定した5秒かけて動きます。

.sample-cover:hover .sample-bg {
 -webkit-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -o-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform: scale(1.2);
}

背景色

黒いオーバーレイがかかるような設定です。:hover擬似クラスにはtransition要素で秒数など指定しなかったので、背景画像同様マウスホバー／ホバーアウト時共に.sample-bg::beforeに設定した5秒かけて動きます。

.sample-cover:hover .sample-bg::before {
   background-color: rgba(0,0,0,0.7);
}

ボーダーライン、ボタン共通設定

ボーダーラインとボタンはどちらもopacity:0からopacity:1にするため、両要素に対して下記設定を行っています：

.sample-cover:hover .sample-borderline, .sample-cover:hover .roll-button {
 opacity: 1;
}

これでマウスがホバーすると指定した時間とエフェクトで姿を現します。

ボーダーライン限定の設定

次にボーダーライン限定の設定です。

.sample-cover:hover .sample-borderline {
 -webkit-transition: all 0.8s ease;
 -moz-transition: all 0.8s ease;
 -o-transition: all 0.8s ease;
 transition: all 0.8s ease; 
}

ホバーしたら0.8秒かけてエフェクトはeaseで現れる設定です。.sample-borderlineのtransitionは1.2秒と設定しているので、ホバーアウトするときは時間をかけて消えていくようにしました。

タイトル

秒数は0.8秒と同じですが、マウスホバーしたときはease-in、ホバーアウトしたときはease-outというエフェクトで動くように設定しています。上にずれる動作はtransform: translateY(-100%)にて設定しています。

.sample-cover:hover .sample-comment {
 -webkit-transition: all 0.8s ease-in;
 -moz-transition: all 0.8s ease-in;
 -ms-transition: all 0.8s ease-in;
 transition: all 0.8s ease-in;
 transform: translateY(-100%);
}

ボタン限定の設定

ボタンにはopacity:1になる以外に、ホバーして0.8秒後に0.3秒かけてease-inというエフェクトで3px上にずれる、という設定をしています。文章にするとややこしいですが、コードはこんな感じです：

.sample-cover:hover .roll-button {
 transform: translateY(15px);
 -webkit-transition: all 0.3s ease-in 0.8s;
 -moz-transition: all 0.3s ease-in 0.8s;
 -ms-transition: all 0.3s ease-in 0.8s;
 transition: all 0.3s ease-in 0.8s;
}

transform: translateY(15px)でなぜ3px上に移動するかというと、.roll-buttonにはもともとtransform: translateY(18px)という設定をしていたので、差し引き3px分上に移動するという仕組みです。ホバーアウトすると0秒で消えます。

まとめ

最初はややこしいと思っていた:hoverによる各種エフェクトですが、仕組みが分かってしまえばそこまで難しくありません。transitionは:hoverやjQueryとの併用でウェブサイト上で様々な見せ方ができるのだなと、知っている人からすれば当たり前のことに改めて気付きました。独学でどこまでいけるかは分かりませんが、思いついたことはどんどん取り入れて知識を増やしていきたい。

Yusaku Days