CSS擬似要素の小さな悪戯｜ホバーで画像や言葉をそっと表示する方法

CSSの擬似要素を使うと、HTMLには直接書いていない画像や文字を、あとからそっと表示できます。

今回は、文字にマウスを乗せたときだけ画像をふわっと表示する、小さなホバーギミックを作ってみます。

大きな機能ではありません。けれど、見出しやリンク、ちょっとした案内文に仕込むと、サイトの中に小さな遊び心を足せます。

この記事では、::before と :hover を使って、文字の近くに画像や文字を表示する方法を紹介します。スマホではホバーではなく、タップに近い動作で確認できる場合があります。

文字にホバーすると画像が出るサンプル

まずは実際に動きを見てみます。下の「この文字にホバー」にマウスを乗せてみてください。

例：マウスを乗せると… この文字にホバー してみて。

文字の上に、画像がふわっと出てきたと思います。

このギミックの正体は、最初から画像を表示しているのではなく、::before で作った見えない箱を、ホバーしたときだけ opacity で見えるようにしているだけです。

今回使うHTML

HTML側はとてもシンプルです。動きを付けたい文字を span で囲み、クラス名を付けます。

マウスを乗せると… <span class="hover-summon">この文字にホバー</span> してみて。

hover-summon という名前を付けた文字に対して、CSSで画像を呼び出していきます。

基本のCSS

まずは、上方向に画像を表示する基本形です。

.hover-summon {
  position: relative;
  cursor: pointer;
  color: #43577a;
  font-weight: bold;
}

.hover-summon::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background-image: url("img.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease, margin-bottom 0.3s ease;
  pointer-events: none;
}

.hover-summon:hover::before {
  opacity: 1;
  margin-bottom: 10px;
}

img.jpg の部分を、表示したい画像のURLに変更すれば使えます。

このギミックで大事なところ

細かいプロパティを全部覚える必要はありません。まずは、次の4つだけ押さえると仕組みが見えやすくなります。

この4つが、今回のギミックの中心です。

position: relative は画像の置き場を決めるため

position: relative; は、画像を表示するための基準点を作る役割です。

これを書かないと、擬似要素で出した画像が、意図しない場所を基準に配置されることがあります。文字の近くに画像を出したいなら、まず対象の文字側に position: relative; を指定しておくと扱いやすくなります。

content: “”; がないと擬似要素は出てこない

::before や ::after を使うときは、基本的に content が必要です。

今回は画像を背景として表示するので、中身の文字は不要です。だから content: ""; として、空の箱だけを作っています。

content: ""; は「中身は空でいいから、擬似要素の箱だけ作ってください」という指定です。

opacity で潜ませて、hover で見せる

今回の「召喚」の正体は、画像をあとから生成しているというより、透明にして隠していたものを表示している動きです。

.hover-summon::before {
  opacity: 0;
}

.hover-summon:hover::before {
  opacity: 1;
}

opacity: 0; で透明にしておき、ホバーされたときに opacity: 1; へ変える。これだけで、隠れていた画像が現れます。

さらに transition を指定しておくと、パッと出るのではなく、ふわっと出る動きになります。

画像を下に表示する

上では文字の上に画像を出しました。今度は、文字の下に表示してみます。

例：マウスを乗せると… ここの下へ表示 します。

上に表示していたときの bottom を top に変え、ホバー時の余白も margin-bottom から margin-top に変えています。

.hover-summon-bottom::before {
  top: 10px;
}

.hover-summon-bottom:hover::before {
  margin-top: 10px;
}

画像を右に表示する

右側に表示したい場合は、文字の右端を基準にします。

例：マウスを乗せると… ここの右に表示 します。

left: 100%; にすると、対象文字の右側を基準にできます。
上下の位置は top: 50%; と transform: translateY(-50%); で中央に合わせています。

.hover-summon-right-side::before {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}

.hover-summon-right-side:hover::before {
  margin-left: 10px;
}

画像を左に表示する

左側に表示したい場合は、right: 100%; を使います。

例：マウスを乗せると… ここの左に表示 します。

右に出すときは left: 100%;、左に出すときは right: 100%;。
この違いだけでも、表示方向を切り替えられます。

.hover-summon-left-side::before {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}

.hover-summon-left-side:hover::before {
  margin-right: 10px;
}

画像ではなく文字を表示する

擬似要素で出せるのは画像だけではありません。content に文字を入れれば、ホバー時に短い言葉を表示することもできます。

例：マウスを乗せると… ここから上に言葉 が浮かびます。

文字を表示する場合は、画像用の width、height、background-image、background-size などは不要です。

.hover-summon-text::before {
  content: "Hello";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease, margin-bottom 0.3s ease;
  white-space: nowrap;
}

.hover-summon-text:hover::before {
  opacity: 1;
  margin-bottom: 10px;
}

white-space: nowrap; を入れておくと、短い言葉が途中で折り返されにくくなります。

このギミックを使うときの注意点

小さな演出としては楽しいですが、使いすぎるとページの見た目が落ち着かなくなります。

• 重要な説明をホバー表示だけに頼らない
• 画像を大きくしすぎない
• スマホではホバーの挙動がPCと違うことを意識する
• 複数の場所に使う場合は、画像サイズや表示位置をそろえる

特に、ホバーしないと読めない重要情報を入れるのは避けた方が良いです。
あくまで装飾や遊び心として使うくらいが、ちょうど良いと思います。

まとめ｜擬似要素は、見えない小さな仕掛けを作れる

今回のギミックは、CSSの ::before で作った擬似要素を、普段は透明にしておき、ホバーしたときだけ表示する仕組みです。

タイトルでは「文字に潜ませる」と書きましたが、実際にはページを開いた時点で、透明な状態の擬似要素がそこにあります。
それを :hover と opacity で見えるようにしているだけです。

仕組みはとても小さいですが、使い方次第でサイトに静かな遊び心を足せます。
見出しやリンクの近くに、少しだけ表情を付けたいときに試してみると面白いと思います。