画像をマウスオーバーしたときに効果を与えるメモ4つ #CSS

画像をマウスオーバーしたときに効果を与えるメモ4つ #CSS

昔はjavascriptでやってた画像をマウスオーバーしたときに、何らかのアクションを与える効果。それが今ではCSSだけでできるようになりました。このブログでも使ってる効果を紹介します。

画像をマウスオーバーしたときに「半透明」にする

半透明にするプロパティopacityを使って、マウスオーバーしたときに半透明にします。時間効果を与えるtransitionもつけて、ふんわりと変化。
葉っぱグングン21日め

画像をマウスオーバーしたときに「拡大」する

画像を固定のブロックで囲みます。

画像を囲んでいるブロックをoverflow:hiddenでサイズが変わらないように固定してから、画像自体をtransformを使って拡大します。

葉っぱグングン21日め

画像をマウスオーバーしたときに「移動」する

上の「拡大」すると同じ要領で画像を動かすこともできます。

画像を固定のブロックで囲みます。

画像を囲んでいるブロックサイズを画像に対して少し小さめにするのがポイント。そうすると、移動させたときに画像がはみ出ないです。

葉っぱグングン21日め

画像をマウスオーバーしたときに「回転」させる

さらに同じ要領で画像を回転させることもできます。

画像を固定のブロックで囲みます。

またまた登場のtransformを使って、動きを与えます。rotateは回転です。rotateYはY軸(縦軸)を基準に回転するものです。

葉っぱグングン21日め
42,856 views/total