画像が動く！CSSで作るホバーエフェクトの基本と応用

2024年5月19日

画像や文字をふわっと浮かせたり、影をつける方法についてCSSを使って解説していきます。

ホバーエフェクト（Hover Effect）とは、ユーザーがマウスカーソルを特定の要素に重ねた（ホバーした）ときに、その要素に何らかの視覚的な変化を与えるエフェクトのことです。ホバーエフェクトは、インタラクティブなウェブデザインを実現するための重要なテクニックの一つであり、ユーザーエクスペリエンスを向上させるために広く使われています。

ユーザーエクスペリエンスとは、ユーザーが製品やサービスを利用する際に得られる総合的な体験や感情のことを指します。これは、単に使いやすさ（ユーザビリティ）にとどまらず、ユーザーが感じる満足感や楽しさ、便利さ、さらには不満やストレスといった感情面も含めた広範な概念です。

マウスポインターを当てた際に、画像に影ができたり、文字の色が変化させることが可能です。

◾️ホバーを利用した基礎内容は下記ページにて詳細を解説しています。

Matoiの合言葉

【CSS】ホバーエフェクトを使用してユーザーに印象を残す方法

Matoiの合言葉 – 旅人の日常世界

WEBデザイン見出し特集！！魅力的な見出しの作り方とテクニック – Matoiの合言葉おしゃれ見出しデザイン背景や線は単色設定をしていましたが、ここからはデザインしてみましょう。下線デザイン

ホバーエフェクトサンプル集

01 画像をふわっと上に動く

カーソルを画像の上にあてると「ふわっ」と動く感じをCSSだけで設定が可能

transition、transformのコードを使用して画像に動きをつけます。

01　ふわっと動く

<div class="sample01">
<img src="○○○○○○" >
</div>

.sample01{
	transition: .3s;
}

.sample01:hover{
	 transform: translateY(-4px);
}

transitionは簡単なアニメーションの変化を調整する働きを持っています。

動くスピードを設定しています。transitionに設定が入っていないとふわっとした動作にはなりません。

transformは回転、拡大縮小、傾斜、移動させる設定をする際に使用するコードです。

transform:translate()

xy軸上の移動させるための設定です。

今回はカーソルを当てた際に4px分上に動く設定をしています。y軸上の場合は「ー」（マイナス）をつけます。

影をつける

02 影をつける

<div class="sample02">
<img src="○○○○○○" >
</div>

.sample02 img{
	transition: .3s;
}

.sample02 img:hover{
	transform: translateY(-4px);
    box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
}

sample01とは違って「img」画像に設定をかけています。

「div」要素に設定をしているsample01のように設定をしてしまうと、下のように全体に影がついてしまいます。

失敗例

サイズの設定をしていない場合にこのような失敗が起こります。

画像を左に動かす

03 左に動かす

<div class="sample03">
<img src="○○○○○○" >
</div>

sample03{
   text-align:center;
}

sample03 img{
   transition: .3s;
}

sample03 img:hover{
   transform: translateX(-10px);
   box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
}

右に動かしたい場合は「10px」と記載します。
マイナスをつける必要はありません。

画像を中央に設置するために「text-align:center;」を使用しています。中央に配置しない場合は削除しても大丈夫です。

角を丸くする

04 角を丸くする

<div class="sample04">
<img src="○○○○○○" >
</div>

.sample04{
   text-align:center;
}

.sample04 img{
   transition: .3s;
}

.sample04 img:hover{
   border-radius: 10px;
}

ふわっと浮かして丸くする

「border-radius」を使用すると角が丸くさせることができます。これらを応用して「浮く」「丸くする」両方を設定してみましょう、

05 浮く＋丸くする

<div class="sample05">
<img src="○○○○○○" >
</div>

.sample05{
   text-align:center;
}

.sample05 img{
   transition: .3s;
}

.sample05 img:hover{
   transform:translateY(-4px);
   border-radius: 10px;
}