【CSS】マウスオーバーで画像がニュッと拡大するエフェクトをつける

  • はてブ

口で説明しづらいのですが、最近よく見かけるこれです。
↓ マウスカーソルあわせてみてください。


マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がニュッと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。


ざっくり説明すると、ニュッとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。

HTML


CSS


親要素のdivには overflow:hidden; を付けます。無いと領域から画像がはみ出てしまうので注意。
ベンダープレフィックスが沢山ついているので見づらいですが、aタグに:hoverした時に、imgに「transform: scale(1.2);」を付与して、1.2倍に拡大しています。
「transition: all 0.3s ease;」は0.3秒かけて変化させる、アニメーションの指定です。
opacityなど、一緒にかけても良いかもしれません。


とても簡単ですね。


ボタンの、文字部分のscaleはそのままにしたい場合

こちらも意外と簡単です。



HTML


CSS



親要素のdivに「position:relative;」が追加されたのと、文字部分のCSSが追加されました。

※position:absolute;と言えば、絶対位置を指定して配置するやり方かと思うのですが、親要素にposition:relative;をつけると、親要素の左上の座標を基準として配置することができます。

今回の場合は親の#demoにposition:relative;、子要素の.wordにposition:absolute;bottom:0;をつけていますので、.wordが#demoの下付きになっています。意外と知らなかったりするので小ワザをメモ。




とても簡単ですがサイトに動きを出す際に便利ですので、是非お試しあれ。

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ