Hoverllin とは

hvr-fadeIn などのクラスを付けておくだけで、要素にホバーしたときにアニメーションが実行される、CSSのみのホバーアニメーションライブラリです。

特徴：

  • CSS only — JavaScriptは不要
  • transition ベース — FireShot問題が発生しない
  • @media (any-hover: hover) で制御 — タッチデバイスではホバーエフェクトが発火しない
  • :where([href], [onclick]) を使った詳細度ゼロ設計 — プロジェクト固有のCSSに詳細度で負けない
  • [unhoverllin] 属性 — 特定のセクション内でホバーエフェクトを無効化できる

基本的な使い方

1. ファイルを読み込む

<link rel="stylesheet" href="hoverllin.css">

2. ホバーエフェクトをつけたい要素にクラスを付ける

<!-- 画像にホバーすると、下からテキストがフェードイン -->
<a href="#">
  <img class="hvr-fadeInBottom" src="image.jpg" alt="" />
</a>

注意： ホバーエフェクトは a[href] または [onclick] を持つ要素の子孫、あるいはそれら自体に付いた要素が対象です。クリッカブルなコンテキストでのみ発火します。

利用可能なエフェクト一覧

フェードイン系

ホバー前は非表示（opacity: 0）で、ホバー時にフェードインします。

クラス名効果
hvr-fadeInフェードイン
hvr-fadeInBottom下から微動しながらフェードイン
hvr-fadeInTop上から微動しながらフェードイン
hvr-fadeInLeft左から微動しながらフェードイン
hvr-fadeInRight右から微動しながらフェードイン
<!-- 通常時は非表示、ホバーで表示 -->
<figure>
  <img src="photo.jpg" alt="" />
  <figcaption class="hvr-fadeInBottom">キャプションテキスト</figcaption>
</figure>

背景色系（::before を使用）

ホバー時に要素の背後から背景色が出現します。

クラス名効果
hvr-bgFadeIn背景色がフェードイン
hvr-bgInBottom背景色が下からスライドイン
hvr-bgInLeft背景色が左からスライドイン
hvr-bgOpenIn背景色が中央から広がる
<!-- ホバーでボタンの背景色が広がる -->
<a href="#" class="hvr-bgOpenIn">ボタンテキスト</a>

背景色は --hover-color CSS変数で上書きできます。

オーバーレイ系（::after を使用）

ホバー時に要素の上にオーバーレイが出現します。

クラス名効果
hvr-layFadeInオーバーレイがフェードイン
hvr-layInBottomオーバーレイが下からスライドイン
hvr-layInLeftオーバーレイが左からスライドイン
hvr-layOpenInオーバーレイが中央から広がる

幕消去系（::after を使用）

ホバー時に画像などを覆う暗い幕が消えます。通常時は幕がかかっており、ホバーで消えることで「選ばれた感」を演出します。

クラス名効果
hvr-coatFadeOut暗幕がフェードアウト
hvr-coatOutTop暗幕が上方向へスケールアウト
hvr-coatOutBottom暗幕が下方向へスケールアウト
hvr-coatOutLeft暗幕が左方向へスケールアウト
hvr-coatOutRight暗幕が右方向へスケールアウト
<!-- 画像に暗幕がかかっており、ホバーで消える -->
<a href="#">
  <figure class="hvr-coatOutBottom">
    <img src="photo.jpg" alt="商品画像" />
  </figure>
</a>

ブラー消去系（::after + backdrop-filter を使用）

クラス名効果
hvr-blurFadeOutブラーオーバーレイがフェードアウト
hvr-blurOutTop / Bottom / Left / Rightブラーオーバーレイが各方向へスケールアウト

テキスト押し出し系

ホバー時に別のテキストが押し出されて入れ替わります。

<a href="#" class="hvr-pushOutIn">
  <rb>通常テキスト</rb>
  <rt>ホバーテキスト</rt>
</a>

rb が通常時のテキスト、rt がホバー時に現れるテキストです。

移動系

クラス名効果
hvr-moveToUpホバーで上に微動
hvr-moveToDownホバーで下に微動
hvr-moveToBackホバーで左に微動
hvr-moveToForeホバーで右に微動
<!-- ホバーで上に浮き上がる -->
<a href="#" class="hvr-moveToUp">もっと見る</a>

スケール系

クラス名効果
hvr-growホバーで拡大
hvr-shrink通常時は少し大きく、ホバーで元のサイズに戻る

ドロップシャドウ

クラス名効果
hvr-shadowedホバーで輝度アップ＋ドロップシャドウ

フィルター Ness（ホバーでフィルターがかかる）

クラス名効果
hvr-brightnessホバーで明るくなる
hvr-darknessホバーで暗くなる
hvr-whitenessホバーで白飛び
hvr-blacknessホバーで黒くなる
hvr-contrastnessホバーでコントラスト強調
hvr-saturatenessホバーで彩度アップ

フィルター Less（通常時にフィルターがかかり、ホバーで解除）

クラス名効果
hvr-grayless通常時グレースケール、ホバーでカラーに
hvr-blurless通常時ブラー、ホバーでクリアに
hvr-brightless通常時明るく、ホバーで通常に
hvr-darkless通常時暗く、ホバーで通常に
<!-- 通常はグレースケール、ホバーでカラーに -->
<a href="#">
  <img class="hvr-grayless" src="logo.png" alt="" />
</a>

hvr-grayless は特にロゴ一覧やパートナー企業のロゴでよく使います。

backdrop-filter 系

::after に backdrop-filter を適用するため、要素が半透明・ブラー等の場合でも効果が出ます。

クラス名効果
hvr-bdfGrayless通常時グレースケール（backdrop-filter版）
hvr-bdfBlurless通常時ブラー（backdrop-filter版）
hvr-bdfBrightnessホバーで明るくなる（backdrop-filter版）
hvr-bdfDarknessホバーで暗くなる（backdrop-filter版）

ホバーエフェクトを無効化する（[unhoverllin]）

祖先要素に unhoverllin 属性を付けると、その配下のホバーエフェクトを無効化できます。

<!-- このセクション内はホバーエフェクトなし -->
<section unhoverllin>
  <a href="#">
    <img class="hvr-grayless" src="photo.jpg" alt="" />
  </a>
</section>

[unhoverllin] を付けると、CSSの初期状態（opacity: 0 や filter: grayscale(1) 等）が解除され、要素が通常表示になります。ホバーしても何も起きません。

CSS変数によるカスタマイズ

変数名用途デフォルト
--hover-color背景色系・オーバーレイ系の色inherit
/* セクション固有の色をセット */
.sect-xxx a {
  --hover-color: hsl(220, 80%, 55%);
}

技術的な背景：なぜ :where([href], [onclick]) を使うのか

ホバー状態のセレクタは以下のような形です：

@media (any-hover: hover) {
  a:where([href], [onclick]):hover :is(.hvr-fadeIn, ...),
  :is(.hvr-fadeIn, ...):where([href], [onclick]):hover {
    opacity: 1;
    transform: translate(0);
  }
}

:where() を使うことで詳細度がゼロになります。これにより、プロジェクト固有のCSSから詳細度で負けることがありません。

また @media (any-hover: hover) を使うことで、タッチデバイス（スマートフォン・タブレット）ではホバーエフェクトが発火しないようにしています。タッチデバイスでは「ホバー」という操作がないため、エフェクトが意図せず残ってしまうことを防ぐためです。