IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

自作Webアプリ「IT勉強会用 名刺ジェネレーター」を公開しました!ぜひご活用ください😀

https://it-benkyoukai-meishi.herokuapp.com/

画像をホバーした時に画像を拡大させてみる 【CSS】

はじめに

ここでは、以下の動画を参考にして画像ホバー時の動作を記述してみる。

 

作ってみる

f:id:matt-note:20190317222524p:plain

f:id:matt-note:20190317222542g:plain

-> 画像をホバーした時に、画像を拡大させることができた。画像の親要素に overflow: hidden; を指定しておくと、画像が拡大した時に画像が親要素からはみ出ないようにすることができる。

 

画像には transition でアニメーションの速度を指定しておいて、ホバー時に transform で画像を拡大させる。

 

ホバー時に transition の設定をした場合は、以下のような動作になる。ホバーが外れるとアニメーションしない。そのため、transition は画像要素に対して設定しておくと良い。

f:id:matt-note:20190317224035p:plain

f:id:matt-note:20190317223910g:plain