【PR】を含みます。

フロントエンド

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

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

もくじ

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

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

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

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

画像のマウスオーバー時のエフェクトサンプル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;
  opacity: 1;
}
.item_box.-close-from-left-and-right .item_link:hover .item_mask-right {
  left: 50%;
}
.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);
}

まとめ

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

どのサンプルもコピペで簡単に使えるので、ぜひご自身のWebサイトやブログのデザインに活用してみてください。

マウスオーバーの演出を加えることで、ユーザーの注目を集めたり、情報を効果的に伝えたりすることができます。

今後もWebデザインに役立つテクニックを紹介していきますので、ぜひ他の記事もご覧ください。

-フロントエンド
-