マウスを載せると動くCSS

ホバー時に移動

マウスを載せる(ホバー時)に位置が少しだけ動くくらいならJavaを使わなくてもCSSで簡単に出来る。

どの方向にどれだけ動かしたいかは「translate(0px, -5px)」の値で決定。

値の見方はXとY(縦方向、横方向)のみ指定可能で、プラスの値二つなら右下に下がる。

左上に上げたいなら両方をマイナス値にすればOK。

ちなみに上記CSSは横方向0、縦方向マイナス値なのでホバー時に上に動く。

※スマホで見た時に微妙だったので要改良。

ホバー時に拡大

標準の大きさが1になる。

ホバー時に小さくしたい場合は1未満の数字を記載。

コメントを残す

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