マウスオーバーで画像を拡大させる
前回、transitionを使ったアニメーションを勉強しましたので、
早速、サイトのトップページにある記事のアイキャッチ画像を
マウスオーバー時に拡大させてみました。
スポンサーリンク
transformで変形後の状態を設定
まずは、transformプロパティで、変形後の状態を設定します。
transformプロパティのscaleで画像を拡大させます。
また、opacityをつかって画像を透過させます。
・transform: scale(1.2, 1.2);・・・1.2倍画像を拡大させる
・opacity: 0.7 ・・・画像を透過させる(70%)
・opacity: 0.7 ・・・画像を透過させる(70%)
transitionの設定
transformを設定しただけではなめらかに変化しませんので、
次に、transitionプロパティの設定を行います。
|
1 2 3 4 5 6 7 8 |
.eyecatch img:hover{ opacity: 0.7; transform: scale(1.2, 1.2); transition-property: transform, opacity; transition-duration: 0.3s; transition-timing-function:ease-in-out; transition-delay: 0s; } |
・transition-property・・・トランジションを実行させるプロパティを設定します。
今回は、transform, opacityを設定します。
今回は、transform, opacityを設定します。
・transition-duration・・・どれだけ時間をかけて変化させるかを設定します。
今回は、0.3sです。
・transition-timing-function・・・動作変化のパターンを設定します。
今回は、ease-in-out(ゆっくりと始まり、ゆっくりと終わる）を設定しました。
・transition-delay・・・トランジションの開始を遅らせるプロパティです。
今回は、0sとしました。
画像の親要素のdivにoverflow:hiddenを追加して
拡大して画像がはみ出した部分を隠します。
|
1 2 3 |
.eyecatch { overflow: hidden; } |
ちなみに、私のサイトでは、親要素の高さが画像サイズに揃っていないため、
overflow:hiddenの設定をしても、画像が縦方向だけはみ出してしまいました。。
回避方法は、jQueryを使って回避してみたので別途記事にしたいと思います。
最後に
以上、前回勉強したtransform,transitionを使って
アイキャッチ画像を拡大させてみました。
少しでも参考になれば幸いです。
スポンサーリンク
関連記事(一部広告含む)
