画像にオンマウスすると、影が付いたり拡大する効果を「transition」「box-shadow」「transform」を使って作ってみました。
それぞれの効果について解説していきます。
最初にデモページをご覧ください。
デモページを見る
それでは、デモページの左の画像を解説します。まずはHTMLとCSSの記述から。
HTML
<div class="flex_item">
<a href="#"><img src="img/img01.jpg" alt="image" class="kakudai"></a>
<p>画像が拡大します</p>
</div>
CSS
width: 100%;
border: 3px solid #fff;
border-radius: 15px;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.kakudai:hover {
border: 3px solid #ff0000;
box-shadow: 0 10px 10px -5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 10px 10px -5px rgba(0,0,0,0.5);
transform: scale(1.05) rotate(0.1deg) translateX(0);
-webkit-transform: scale(1.05) rotate(0.1deg) translateX(0);
}
次に、CSSのそれぞれの動きを順番に確認していきます。
「transition」について
「transition」は、時間的変化を指定できます。下記4つの一括指定プロパティです。
- transition-property：CSSプロパティの名前で、「margin」などです。
- transition-duration：所要時間で、開始から終わりまで何秒かけるかです。
- transition-timing-function：変化のタイミングを指定するもので、例えば「ease-out」はゆっくり終わる動きになります。
- transition-delay：変化がいつ始まるかを指定します。
今回の「transition: all 0.3s;」は全てのプロパティの動きが0.3秒で変化するという事になります。
動きについて、こちらで分かりやすく解説されていますのでご覧ください。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
「box-shadow」について
「box-shadow」は、ボックスに影をつけることができます。
書き方
- 1番目の値は水平方向の距離で、正の値は右へ、負の値をは左へ移動します。
- 2番目の値は垂直方向の距離で、正の値は下へ、負の値をは上へ移動します。
- 3番目の値はぼかしの距離で、値が大きいほど影の端のぼかしが強く、0だとぼかし無しです。負の値は指定できません。
- 4番目の値は広がりの距離で、正の値は影を全方向に拡大、負の値は縮小します。
- rgbaは色指定で、4つめの「0.5」は透明度です。
- insetを指定すると、ボックスの内側に影をつけることができます。
「transform」について
「transform」は、要素を拡大縮小、回転、移動、傾斜を指定できます。
関数を半角スペースで区切る事で複数指定することができます。
- scale：拡大縮小（1を基準に伸縮する比率を指定します。）
- rotate：回転（90度回転させたいときは90deg）
- translate：移動（単位はpxで指定します。）
- skew：傾斜（単位はdegで指定します。）
デモページの真ん中の画像はオンマウスで画像が少し回転しますが、下記の記述になっています。
CSS
これは、「1.05」拡大して「2.0deg」回転させて、移動はしないという事になります。
デモページの右の画像は、あまり使う事が無さそうな動きですが、下記の記述になっています。
CSS
「translateY(-30px)」は垂直方向で負の値なので上に移動します。
解説は以上となります。
また、デモページのファイル一式をダウンロードできますので、よろしければどうぞ。
【 css43.zip（564KB） 】