画像にマウスオーバー時、ズームインするような動きをつけるCSSの設定方法

シェアする

どうも。じゅんぺい@junpeko516です。

今回はPCで画像にマウスオーバーした時に、作品の写真が少しズームインするような動きをCSSで実現してみたいと思います。


スポンサーリンク

目標とする動作

今回はCSSのみで動きのあるデザインを作成します。

目標物はこちらです。

See the Pen transform css by Jumpei Konishi (@junpeko) on CodePen.

※width、height、marginプロパティは表示を整えるために設定しています。
スマホで見た時は、効果が反映されないのであしからずです(汗)

ポイントの整理

ここで大事なポイントを挙げておきます。

  • 画像をを拡大させる
  • 時間をかけてなめらかに拡大させる
  • 枠外にはみ出した分の写真を表示させない

この、3点をCSSプロパティで設定すれば実現できます。

要素を拡大するtransformプロパティ

transformプロパティは、要素を変形させるときに使用するプロパティです。

変形、移動、縮尺、回転、傾斜などの変形ができるんですね。

ここでは、画像を拡大したいので、縮尺の設定であるscale(X方向の縮尺比率, Y方向の縮尺比率)を使います。
具体的には、画像のクラスに

transform: scale(1.2, 1.2);

を設定します。
以下の設定でもオッケーです。

transform: scale(1.2);

これで、マウスオーバーした時に画像が1.2倍に拡大されます。

時間をかけて拡大させるtransitionプロパティ

transitionプロパティはtransition効果(時間的変化)をまとめて指定するプロパティです。

transitionプロパティは、

  • transition-property( transition効果を適用するCSSプロパティ名を指定する)
  • transition-duration(変化に掛かる時間を指定する)
  • transition-timing-function(変化のタイミング・進行割合を指定する)
  • transition-delay(変化がいつ始まるかを指定する)

をまとめて設定可能なプロパティです。

今回は拡大させるときの変化の時間を設定したいので、transition-durationを設定すればよいですね。

マウスオーバーした時に

transition-duration: 0.5s;

の設定を追加すればOKです。

枠外にはみ出した分の写真を表示させなくさせるoverflow: hidden

これで、画像のマウスオーバー時に0.5秒かけて画像が1.2倍になるのですが、今のままだと画像が親クラスであるboxクラスの範囲をはみ出してしまいます。

そこで、overflowプロパティではみ出した部分の画像を表示させないようにします。

画像の親クラスであるboxクラスに、

overflow: hidden;

を設定すればオッケーです。

まとめ

これで完成です。

See the Pen transform css by Jumpei Konishi (@junpeko) on CodePen.

transformやtransitionプロパティを使いこなせるようになれれば、CSSだけでも動きのあるデザインが結構できそうですね。

ちなみに、https://caniuse.com/では、主要の最新ブラウザにすべて対応してます。(最新ブラウザであれば、ベンダープレフィックスは不要)


スポンサーリンク