デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

マウスオーバーで画像を拡大させる

マウスオーバーで画像拡大
前回、transitionを使ったアニメーションを勉強しましたので、
早速、サイトのトップページにある記事のアイキャッチ画像を
マウスオーバー時に拡大させてみました。
アイキャッチ拡大1

スポンサーリンク

transformで変形後の状態を設定

まずは、transformプロパティで、変形後の状態を設定します。
transformプロパティのscaleで画像を拡大させます。
また、opacityをつかって画像を透過させます。
アイキャッチ拡大2

・transform: scale(1.2, 1.2);・・・1.2倍画像を拡大させる
・opacity: 0.7 ・・・画像を透過させる(70%)

transitionの設定

transformを設定しただけではなめらかに変化しませんので、
次に、transitionプロパティの設定を行います。

アイキャッチ拡大3

・transition-property・・・トランジションを実行させるプロパティを設定します。
今回は、transform, opacityを設定します。

・transition-duration・・・どれだけ時間をかけて変化させるかを設定します。
今回は、0.3sです。

・transition-timing-function・・・動作変化のパターンを設定します。
今回は、ease-in-out(ゆっくりと始まり、ゆっくりと終わる)を設定しました。

・transition-delay・・・トランジションの開始を遅らせるプロパティです。
今回は、0sとしました。

overflow:hiddenを使って、画像のはみ出しを隠す

画像の親要素のdivにoverflow:hiddenを追加して
拡大して画像がはみ出した部分を隠します。
アイキャッチ拡大4

ちなみに、私のサイトでは、親要素の高さが画像サイズに揃っていないため、
overflow:hiddenの設定をしても、画像が縦方向だけはみ出してしまいました。。
回避方法は、jQueryを使って回避してみたので別途記事にしたいと思います。

最後に

以上、前回勉強したtransform,transitionを使って
アイキャッチ画像を拡大させてみました。
少しでも参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン