HTML・CSSだけで作れる！リストのホバー演出アイデア集

リスト項目のホバー演出は、その要素がクリック可能であることを伝えるだけでなく、操作の気持ちよさや、コンテンツの世界観を表現することにも役立ちます。今回の記事では、HTMLとCSSだけで実装可能なリスト項目のホバー演出のアイデアを紹介します。

▼ 今回紹介する実装例一覧

サンプルを別ウインドウで開く

1. 横にアイコンが表示される

ホバー時に、アイコンに指定しているCSSのscaleプロパティの値を0から1に変化させることで、拡大しながら現れるようにしています。初期状態でscale: 0に指定しておくことで、アイコンを非表示のように隠しておけます。

2. カーソルが変化する

ホバー時に表示されるカーソルをオリジナル画像に変更しています。CSSを以下のように指定すると、カーソル位置やクリック範囲を細かく調整できます。

cursor: url("画像パス") x座標 y座標, フォールバック（pointerなど）;

3. 文字がノイズ風にブレる

::before、::afterの疑似要素で文字を三重に重ね、ホバー時にCSSのtranslateプロパティで左右へわずかにずらすことで、ブレを表現します。

このデモでは、リンク要素にdata-textというカスタム属性を指定し、本体テキストと同じ文字列を入れています（例：<a data-text="HOME">HOME</a>）。疑似要素のcontent: attr(data-text)でこの文字列をそのまま使うことで、余分な要素を増やさずに同じテキストを重ねて表示できます。

4. アイコンが変化する

ホバー時に別のアイコンに変化させています。

まったく違うアイコンに変えるのもよいですが、同じモチーフで質感が違ったり、色違いのアイコンに変化するなどしても、おもしろいアニメーションになりそうです。

5. 黒丸が出現する

ホバー時に疑似要素の::afterに指定しているCSSのscaleプロパティの値を0から1に変化させています。黒丸にCSSのmix-blend-mode: difference;を指定することで、重なった部分のテキストの色が反転します。

6. 灯りがつく

ホバー時に、疑似要素で描いたグラデーションの円を重ねています。

背景が暗い色のときは、CSSのmix-blend-mode: hard-lightを指定するとパッと明るい印象になります。使いたい色に合わせてmix-blend-modeプロパティの色々な値を試してみてください。

▼ mix-blend-mode: hard-lightありの場合となしの場合の比較

「☆わたしたち」というリンクにホバーした際の比較画像。上はmix-blend-mode: hard-lightを指定した場合で、星のアイコンの輪郭がはっきりと際立っている。下は指定なしの場合で、輪郭がぼやけて見える。

mix-blend-modeについては以下の記事で紹介しています。

CSSのブレンドモードが素敵！ mix-blend-modeを使いこなそう

7. アイコンが回転する & 文字がアウトライン化する

文字の背景にアイコンを配置して、ホバー時のみ回転させています。ホバー時に文字色を背景色と同じ（もしくはtransparent）に変え、CSSの-webkit-text-strokeを指定しています。-webkit-text-strokeを使うことで、文字のアウトラインにのみ色をつけられます。