【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の下付きになっています。意外と知らなかったりするので小ワザをメモ。




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

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

マークアップ

背景に画像や動画を置いてパララックス効果で見せる

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]

スマホアプリ

Android Studioでベクター画像を登録しよう

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう!

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

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

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

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。