【PR】を含みます。

フロントエンド

【CSS】画像のマウスオーバー（ホバー）時にテキスト表示する方法

CSS 画像のマウスオーバー（ホバー）時にテキスト表示する方法

Webサイトやブログで、画像の上にマウスを乗せたときにテキストやマスクを表示する演出は、ユーザーの注目を集めたり、情報を分かりやすく伝えたりするのにとても効果的です。

本記事では、HTMLとCSSだけで実現できる「画像のマウスオーバー時にテキストを表示する方法」を、18種類紹介します。

すべてコピペで使える実装コード付きなので、初心者の方でもすぐにWeb制作に活用できます。

ぜひ、ご自身のサイトやブログのデザインに取り入れてみてください。

もくじ

まず迷ったらどのエフェクトを選ぶべき？

画像のマウスオーバー時にテキストを表示する方法はいくつもありますが、見た目だけで選ぶと使いにくくなることがあります。

まず迷ったら、シンプルで使いやすいフェード系の表現から試すのがおすすめです。

動きが控えめなので、ブログカードや実績一覧、商品一覧などにも取り入れやすく、幅広い場面で使えます。

一方で、スライドや回転を使ったエフェクトは印象を強く残しやすいため、ポートフォリオやギャラリーのようにデザイン性を重視したい場面に向いています。

ただし、動きが大きい演出は情報の読みやすさを下げることもあるため、使いどころは選んだほうが安心です。

向いている目的おすすめの方向性
まずは無難に使いたいフェード系（サンプル1〜2）
動きで変化を見せたいスライド系（サンプル3〜10）
デザイン性を強く出したい拡大・回転系（サンプル11〜18）
文字をしっかり読ませたい背景マスクが濃く、動きが控えめなもの

「どれが正解か」というより、用途に合うものを選ぶのがポイントです。

迷った場合は、まずシンプルなものから実装し、必要に応じて動きの強いパターンへ広げていくと失敗しにくくなります。

画像のマウスオーバー時のエフェクトサンプル18選

サンプル画像をクリックすると、実装コードに遷移します。

サンプル
HTML・CSSコードに移動します
1.マスクと文字を表示
サンプル
HTML・CSSコードに移動します
2.マスクと文字をふわっと表示
サンプル
HTML・CSSコードに移動します
3.文字を上から表示
サンプル
HTML・CSSコードに移動します
4.文字を下から表示
サンプル
HTML・CSSコードに移動します
5.文字を左から表示
サンプル
HTML・CSSコードに移動します
6.文字を右から表示
サンプル
HTML・CSSコードに移動します
7.文字とマスクを上から表示
サンプル
HTML・CSSコードに移動します
8.文字とマスクを下から表示
サンプル
HTML・CSSコードに移動します
9.文字とマスクを左から表示
サンプル
HTML・CSSコードに移動します
10.文字とマスクを右から表示
サンプル
HTML・CSSコードに移動します
11.文字とマスクを中央から拡大しながら表示
サンプル
HTML・CSSコードに移動します
12.文字とマスクを縦に180度回転しながら表示
サンプル
HTML・CSSコードに移動します
13.文字とマスクを横に180度回転しながら表示
サンプル
HTML・CSSコードに移動します
14.文字とマスクを360度回転しながら表示
サンプル
HTML・CSSコードに移動します
15.文字とマスクを中央から360度回転しながら拡大表示
サンプル
HTML・CSSコードに移動します
16.画像を右にスライドしながらマスクと文字を左から表示
サンプル
HTML・CSSコードに移動します
17.左右からマスクで閉じながら文字を表示
サンプル
HTML・CSSコードに移動します
18.ドアを閉めるようにマスクと文字を表示

画像のマウスオーバー時のエフェクトサンプル・HTML・CSS

【サンプル1】マスクと文字を表示

サンプル
sample1

【実装コード1】マスクと文字を表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample1</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}

【サンプル2】マスクと文字をふわっと表示

サンプル
sample2

【実装コード2】マスクと文字をふわっと表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -fade-in">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample2</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -fade-in */
.item_box.-fade-in .item_mask {
  transition: opacity 1.0s ease;
}

【サンプル3】文字を上から表示

サンプル
sample3

【実装コード3】文字を上から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -text-from-top">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample3</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -text-from-top */
.item_box.-text-from-top .item_mask {
  transition: opacity 0.5s ease;
}
.item_box.-text-from-top .item_mask-text {
  top: -100%;
  transition: top 0.5s ease;
}
.item_box.-text-from-top .item_link:hover .item_mask-text {
  top: 50%;
  transform: translateY(-50%);
}

【サンプル4】文字を下から表示

サンプル
sample4

【実装コード4】文字を下から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -text-from-bottom">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample4</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -text-from-bottom */
.item_box.-text-from-bottom .item_mask {
  transition: opacity 0.5s ease;
}
.item_box.-text-from-bottom .item_mask-text {
  top: 100%;
  transition: top 0.5s ease;
}
.item_box.-text-from-bottom .item_link:hover .item_mask-text {
  top: 50%;
  transform: translateY(-50%);
}

【サンプル5】文字を左から表示

サンプル
sample5

【実装コード5】文字を左から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -text-from-left">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample5</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -text-from-left */
.item_box.-text-from-left .item_mask {
  transition: opacity 0.5s ease;
}
.item_box.-text-from-left .item_mask-text {
  left: -100%;
  transition: left 0.5s ease;
}
.item_box.-text-from-left .item_link:hover .item_mask-text {
  left: 0;
  transform: translateY(-50%);
}

【サンプル6】文字を右から表示

サンプル
sample6

【実装コード6】文字を右から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -text-from-right">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample6</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -text-from-right */
.item_box.-text-from-right .item_mask {
  transition: opacity 0.5s ease;
}
.item_box.-text-from-right .item_mask-text {
  left: 100%;
  transition: left 0.5s ease;
}
.item_box.-text-from-right .item_link:hover .item_mask-text {
  left: 0;
  transform: translateY(-50%);
}

【サンプル7】文字とマスクを上から表示

サンプル
sample7

【実装コード7】文字とマスクを上から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -mask-from-top">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample7</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -mask-from-top */
.item_box.-mask-from-top .item_mask {
  top: -100%;
  transition: top 0.5s ease, opacity 0.5s ease;
}
.item_box.-mask-from-top .item_link:hover .item_mask {
  top: 0;
}

【サンプル8】文字とマスクを下から表示

サンプル
sample8

【実装コード8】文字とマスクを下から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -mask-from-bottom">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample8</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -mask-from-bottom */
.item_box.-mask-from-bottom .item_mask {
  top: 100%;
  transition: top 0.5s ease, opacity 0.5s ease;
}
.item_box.-mask-from-bottom .item_link:hover .item_mask {
  top: 0;
}

【サンプル9】文字とマスクを左から表示

サンプル
sample9

【実装コード9】文字とマスクを左から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -mask-from-left">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample9</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -mask-from-left */
.item_box.-mask-from-left .item_mask {
  left: -100%;
  transition: left 0.5s ease, opacity 0.5s ease;
}
.item_box.-mask-from-left .item_link:hover .item_mask {
  left: 0;
}

【サンプル10】文字とマスクを右から表示

サンプル
sample10

【実装コード10】文字とマスクを右から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -mask-from-right">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample10</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -mask-from-right */
.item_box.-mask-from-right .item_mask {
  left: 100%;
  transition: left 0.5s ease, opacity 0.5s ease;
}
.item_box.-mask-from-right .item_link:hover .item_mask {
  left: 0;
}

【サンプル11】文字とマスクを中央から拡大しながら表示

サンプル
sample11

【実装コード11】文字とマスクを中央から拡大しながら表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -fade-in-from-center">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample11</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -fade-in-from-center */
.item_box.-fade-in-from-center .item_mask {
  transform: scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.item_box.-fade-in-from-center .item_link:hover .item_mask {
  transform: scale(1);
}

【サンプル12】文字とマスクを縦に180度回転しながら表示

サンプル
sample12

【実装コード12】文字とマスクを縦に180度回転しながら表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -rotate-180degrees-vertically">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample12</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -rotate-180degrees-vertically */
.item_box.-rotate-180degrees-vertically .item_mask {
  transform: rotateX(-180deg);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.item_box.-rotate-180degrees-vertically .item_link:hover .item_mask {
  transform: rotateX(0deg);
}

【サンプル13】文字とマスクを横に180度回転しながら表示

サンプル
sample13

【実装コード13】文字とマスクを横に180度回転しながら表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -rotate-180degrees-horizontally">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample13</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -rotate-180degrees-horizontally */
.item_box.-rotate-180degrees-horizontally .item_mask {
  transform: rotateY(-180deg);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.item_box.-rotate-180degrees-horizontally .item_link:hover .item_mask {
  transform: rotateY(0deg);
}

【サンプル14】文字とマスクを360度回転しながら表示

サンプル
sample14

【実装コード14】文字とマスクを360度回転しながら表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -rotate-360degrees">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample14</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -rotate-360degrees */
.item_box.-rotate-360degrees .item_mask {
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.item_box.-rotate-360degrees .item_link:hover .item_mask {
  transform: rotate(360deg);
}

【サンプル15】文字とマスクを中央から360度回転しながら拡大表示

サンプル
sample15

【実装コード15】文字とマスクを中央から360度回転しながら拡大表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -rotate-360degrees-from-center">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample15</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -rotate-360degrees-from-center */
.item_box.-rotate-360degrees-from-center .item_mask {
  transform: scale(0);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.item_box.-rotate-360degrees-from-center .item_link:hover .item_mask {
  transform: scale(1) rotate(360deg);
}

【サンプル16】画像を右にスライドしながらマスクと文字を左から表示

サンプル
sample16

【実装コード16】画像を右にスライドしながらマスクと文字を左から表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -slide-to-the-right">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample16</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -slide-to-the-right */
.item_box.-slide-to-the-right .item_mask {
  width: 50%;
  left: -50%;
  transition: left 0.5s ease, opacity 0.5s ease;
}
.item_box.-slide-to-the-right .item_link:hover .item_mask {
  left: 0;
}
.item_box.-slide-to-the-right .item_image img {
  transition: margin-left 0.5s ease;
}
.item_box.-slide-to-the-right .item_link:hover .item_image img {
  margin-left: 50%;
}

【サンプル17】左右からマスクで閉じながら文字を表示

サンプル
sample17

【実装コード17】左右からマスクで閉じながら文字を表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -close-from-left-and-right">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask-left"></div>
      <div class="item_mask-right"></div>
      <div class="item_mask-text">sample17</div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -close-from-left-and-right */
.item_box.-close-from-left-and-right .item_mask-left {
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: -50%;
  opacity: 0;
  transition: left 0.5s ease, opacity 0.5s ease;
}
.item_box.-close-from-left-and-right .item_link:hover .item_mask-left {
  left: 0;
  opacity: 1;
}
.item_box.-close-from-left-and-right .item_mask-right {
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 100%;
  opacity: 0;
  transition: left 0.5s ease, opacity 0.5s ease;
}
.item_box.-close-from-left-and-right .item_link:hover .item_mask-right {
  left: 50%;
  opacity: 1;
}
.item_box.-close-from-left-and-right .item_mask-text {
  opacity: 0;
}
.item_box.-close-from-left-and-right .item_link:hover .item_mask-text {
  transition: opacity 0.6s step-end;
  opacity: 1;
}

【サンプル18】ドアを閉めるようにマスクと文字を表示

サンプル
sample18

【実装コード18】ドアを閉めるようにマスクと文字を表示

Copyをクリックするとコピーできます。

HTML
Copy
<div class="item_box -close-the-door">
  <a class="item_link" href="#">
    <div class="item_content">
      <div class="item_image">
        <img src="image URL" alt="サンプル">
      </div>
      <div class="item_mask">
        <div class="item_mask-text">sample18</div>
      </div>
    </div>
  </a>
</div>
CSS
Copy
.item_box * {
  box-sizing: border-box;
}
.item_box {
  width: 100%;
  max-width: 250px; /* 幅調整 */
}
.item_link {
  display: block;
}
.item_content {
  position: relative;
  overflow: hidden;
}
.item_image img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.item_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
}
.item_mask-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  padding: 0.5em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
  transform: translateY(-50%);
}
.item_text {
  margin-top: 10px;
  text-align: center;
}
.item_box .item_link:hover .item_mask {
  opacity: 1;
}
/* -close-the-door */
.item_box.-close-the-door .item_content {
  perspective: 1000px;
  perspective-origin: 0 50%;
  overflow: visible;
}
.item_box.-close-the-door .item_mask {
  transform: rotateY(-90deg);
  transform-origin: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.item_box.-close-the-door .item_link:hover .item_mask {
  transform: rotateY(0deg);
}

画像ホバーで文字を表示するときの注意点

スマホではホバーがそのまま使えないことがある

PCではマウスオーバーで自然に使える表現でも、スマホやタブレットではホバーの挙動が安定しないことがあります。

そのため、ホバー時にしか重要な情報が見えない設計にすると、端末によっては内容が伝わりにくくなることがあります。

説明文やボタンなど大事な情報を載せる場合は、通常時にもある程度見えるようにしておくと安心です。

文字の読みやすさを優先する

画像の上に文字を重ねる場合は、見た目よりも可読性を優先したほうが実務では使いやすいです。

背景画像が明るい場合や模様が多い場合は、文字が埋もれやすくなります。

そのようなときは、マスクを少し濃くする、文字サイズを上げる、行間を広げるなどの調整を行うと読みやすくなります。

画像サイズをそろえないとレイアウトが崩れやすい

一覧表示で複数の画像に同じエフェクトを使う場合は、画像の縦横比が揃っていないと見た目が不安定になりやすいです。

カード型のUIで使う場合は、画像サイズやアスペクト比を揃えておくと、ホバー時の動きも綺麗に見えます。

動きが強すぎると使いにくくなることがある

回転や大きなスライドは見た目のインパクトがありますが、情報を読む場面ではかえって邪魔になることがあります。

特にブログ一覧や商品一覧のように、複数カードを連続して見るUIでは、控えめな演出のほうが全体として見やすくなることが多いです。

リンク付きの要素では操作しやすさも確認する

今回のように画像全体をリンクにするパターンは使いやすい一方で、文字が表示されても実際にはどこを押せばよいか分かりにくくなることがあります。

必要に応じて「詳細を見る」などの文言を入れたり、リンクであることが伝わる見た目にしたりすると、ユーザーにとって親切です。

まとめ

今回は、HTMLとCSSだけで実装できる「画像のマウスオーバー時にテキストやマスクを表示する方法」を18種類のサンプルとともに紹介しました。

シンプルに使いたい場合はフェード系、動きで印象を出したい場合はスライド系、デザイン性を重視したい場合は回転や拡大を使った表現がおすすめです。

ただし、実務では見た目だけでなく、文字の読みやすさやスマホでの見え方も重要です。

まずは控えめな表現から試し、用途に応じて少しずつ演出を強めていくと使いやすくなります。

ぜひご自身のWebサイトやブログに合うエフェクトを選んで、デザインに取り入れてみてください。

-フロントエンド
-