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