どうも。じゅんぺい@junpeko516です。
今回はPCで画像にマウスオーバーした時に、作品の写真が少しズームインするような動きをCSSで実現してみたいと思います。
目標とする動作
今回はCSSのみで動きのあるデザインを作成します。
目標物はこちらです。
See the Pen transform css by Jumpei Konishi (@junpeko) on CodePen.
スマホで見た時は、効果が反映されないのであしからずです（汗）
ポイントの整理
ここで大事なポイントを挙げておきます。
- 画像をを拡大させる
- 時間をかけてなめらかに拡大させる
- 枠外にはみ出した分の写真を表示させない
この、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/では、主要の最新ブラウザにすべて対応してます。（最新ブラウザであれば、ベンダープレフィックスは不要）
