【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 デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに?2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

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

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

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

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