じゅんぺいHTML/CSSツイートシェアはてブ送るPocketどうも。じゅんぺい@junpeko516です。今回はPCで画像にマウスオーバーした時に、作品の写真が少しズームインするような動きをCSSで実現してみたいと思います。今回はCSSのみで動きのあるデザインを作成します。CodePen.※width、height、marginプロパティは表示を整えるために設定しています。スマホで見た時は、効果が反映されないのであしからずです(汗)ポイントの整理ここで大事なポイントを挙げておきます。画像をを拡大させる時間をかけてなめらかに拡大させる枠外にはみ出した分の写真を表示させないこの、3点をCSSプロパティで設定すれば実現できます。変形ができるんですね。Y方向の縮尺比率)を使います。1.2);を設定します。以下の設定でもオッケーです。scale(1.2);これで、マウスオーバーした時に画像が1.2倍に拡大されます。時間をかけて拡大させるtransitionプロパティtransitionプロパティはtransition効果(時間的変化)をまとめて指定するプロパティです。transition効果を適用するCSSプロパティ名を指定する)transition-duration(変化に掛かる時間を指定する)transition-timing-function(変化のタイミング・進行割合を指定する)transition-delay(変化がいつ始まるかを指定する)をまとめて設定可能なプロパティです。今回は拡大させるときの変化の時間を設定したいので、transition-durationを設定すればよいですね。0.5s;の設定を追加すればOKです。hiddenこれで、画像のマウスオーバー時に0.5秒かけて画像が1.2倍になるのですが、今のままだと画像が親クラスであるboxクラスの範囲をはみ出してしまいます。そこで、overflowプロパティではみ出した部分の画像を表示させないようにします。hidden;を設定すればオッケーです。まとめこれで完成です。CodePen.transformやtransitionプロパティを使いこなせるようになれれば、CSSだけでも動きのあるデザインが結構できそうですね。ちなみに、https://caniuse.com/では、主要の最新ブラウザにすべて対応してます。フリーランスのプログラマー。PHP、バックエンド開発が得意。