Webデザイン

【PR】を含みます。

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

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

もくじ

HTMLとCSSのみで画像マウスオーバー時にテキストを表示する方法を紹介します。

ホバー時に画像にマスクをかけて、文字を表示します。

今回はマスクのエフェクトを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】マスクと文字を表示

HTML
Copy
  1. <div class="item_box">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample1</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }

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

サンプル
sample2

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

HTML
Copy
  1. <div class="item_box -fade-in">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample2</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -fade-in */
  57. .item_box.-fade-in .item_mask {
  58.   transition: opacity 1.0s ease;
  59. }

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

サンプル
sample3

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

HTML
Copy
  1. <div class="item_box -text-from-top">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample3</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -text-from-top */
  57. .item_box.-text-from-top .item_mask {
  58.   transition: opacity 0.5s ease;
  59. }
  61. .item_box.-text-from-top .item_mask-text {
  62.   top: -100%;
  63.   transition: top 0.5s ease;
  64. }
  66. .item_box.-text-from-top .item_link:hover .item_mask-text {
  67.   top: 50%;
  68.   transform: translateY(-50%);
  69. }

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

サンプル
sample4

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

HTML
Copy
  1. <div class="item_box -text-from-bottom">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample4</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -text-from-bottom */
  57. .item_box.-text-from-bottom .item_mask {
  58.   transition: opacity 0.5s ease;
  59. }
  61. .item_box.-text-from-bottom .item_mask-text {
  62.   top: 100%;
  63.   transition: top 0.5s ease;
  64. }
  66. .item_box.-text-from-bottom .item_link:hover .item_mask-text {
  67.   top: 50%;
  68.   transform: translateY(-50%);
  69. }

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

サンプル
sample5

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

HTML
Copy
  1. <div class="item_box -text-from-left">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample5</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -text-from-left */
  57. .item_box.-text-from-left .item_mask {
  58.   transition: opacity 0.5s ease;
  59. }
  61. .item_box.-text-from-left .item_mask-text {
  62.   left: -100%;
  63.   transition: left 0.5s ease;
  64. }
  66. .item_box.-text-from-left .item_link:hover .item_mask-text {
  67.   left: 0;
  68.   transform: translateY(-50%);
  69. }

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

サンプル
sample6

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

HTML
Copy
  1. <div class="item_box -text-from-right">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample6</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -text-from-right */
  57. .item_box.-text-from-right .item_mask {
  58.   transition: opacity 0.5s ease;
  59. }
  61. .item_box.-text-from-right .item_mask-text {
  62.   left: 100%;
  63.   transition: left 0.5s ease;
  64. }
  66. .item_box.-text-from-right .item_link:hover .item_mask-text {
  67.   left: 0;
  68.   transform: translateY(-50%);
  69. }

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

サンプル
sample7

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

HTML
Copy
  1. <div class="item_box -mask-from-top">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample7</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -mask-from-top */
  57. .item_box.-mask-from-top .item_mask {
  58.   top: -100%;
  59.   transition: top 0.5s ease, opacity 0.5s ease;
  60. }
  62. .item_box.-mask-from-top .item_link:hover .item_mask {
  63.   top: 0;
  64. }

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

サンプル
sample8

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

HTML
Copy
  1. <div class="item_box -mask-from-bottom">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample8</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -mask-from-bottom */
  57. .item_box.-mask-from-bottom .item_mask {
  58.   top: 100%;
  59.   transition: top 0.5s ease, opacity 0.5s ease;
  60. }
  62. .item_box.-mask-from-bottom .item_link:hover .item_mask {
  63.   top: 0;
  64. }

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

サンプル
sample9

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

HTML
Copy
  1. <div class="item_box -mask-from-left">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample9</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -mask-from-left */
  57. .item_box.-mask-from-left .item_mask {
  58.   left: -100%;
  59.   transition: left 0.5s ease, opacity 0.5s ease;
  60. }
  62. .item_box.-mask-from-left .item_link:hover .item_mask {
  63.   left: 0;
  64. }

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

サンプル
sample10

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

HTML
Copy
  1. <div class="item_box -mask-from-right">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample10</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -mask-from-right */
  57. .item_box.-mask-from-right .item_mask {
  58.   left: 100%;
  59.   transition: left 0.5s ease, opacity 0.5s ease;
  60. }
  62. .item_box.-mask-from-right .item_link:hover .item_mask {
  63.   left: 0;
  64. }

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

サンプル
sample11

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

HTML
Copy
  1. <div class="item_box -fade-in-from-center">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample11</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -fade-in-from-center */
  57. .item_box.-fade-in-from-center .item_mask {
  58.   transform: scale(0);
  59.   transition: transform 0.5s ease, opacity 0.5s ease;
  60. }
  62. .item_box.-fade-in-from-center .item_link:hover .item_mask {
  63.   transform: scale(1);
  64. }

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

サンプル
sample12

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

HTML
Copy
  1. <div class="item_box -rotate-180degrees-vertically">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample12</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -rotate-180degrees-vertically */
  57. .item_box.-rotate-180degrees-vertically .item_mask {
  58.   transform: rotateX(-180deg);
  59.   transition: transform 0.5s ease, opacity 0.5s ease;
  60. }
  62. .item_box.-rotate-180degrees-vertically .item_link:hover .item_mask {
  63.   transform: rotateX(0deg);
  64. }

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

サンプル
sample13

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

HTML
Copy
  1. <div class="item_box -rotate-180degrees-horizontally">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample13</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -rotate-180degrees-horizontally */
  57. .item_box.-rotate-180degrees-horizontally .item_mask {
  58.   transform: rotateY(-180deg);
  59.   transition: transform 0.5s ease, opacity 0.5s ease;
  60. }
  62. .item_box.-rotate-180degrees-horizontally .item_link:hover .item_mask {
  63.   transform: rotateY(0deg);
  64. }

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

サンプル
sample14

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

HTML
Copy
  1. <div class="item_box -rotate-360degrees">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample14</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -rotate-360degrees */
  57. .item_box.-rotate-360degrees .item_mask {
  58.   transition: transform 0.5s ease, opacity 0.5s ease;
  59. }
  61. .item_box.-rotate-360degrees .item_link:hover .item_mask {
  62.   transform: rotate(360deg);
  63. }

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

サンプル
sample15

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

HTML
Copy
  1. <div class="item_box -rotate-360degrees-from-center">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample15</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -rotate-360degrees-from-center */
  57. .item_box.-rotate-360degrees-from-center .item_mask {
  58.   transform: scale(0);
  59.   transition: transform 0.5s ease, opacity 0.5s ease;
  60. }
  62. .item_box.-rotate-360degrees-from-center .item_link:hover .item_mask {
  63.   transform: scale(1) rotate(360deg);
  64. }

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

サンプル
sample16

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

HTML
Copy
  1. <div class="item_box -slide-to-the-right">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample16</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -slide-to-the-right */
  57. .item_box.-slide-to-the-right .item_mask {
  58.   width: 50%;
  59.   left: -50%;
  60.   transition: left 0.5s ease, opacity 0.5s ease;
  61. }
  63. .item_box.-slide-to-the-right .item_link:hover .item_mask {
  64.   left: 0;
  65. }
  67. .item_box.-slide-to-the-right .item_image img {
  68.   transition: margin-left 0.5s ease
  69. }
  71. .item_box.-slide-to-the-right .item_link:hover .item_image img {
  72.   margin-left: 50%;
  73. }

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

サンプル
sample17

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

HTML
Copy
  1. <div class="item_box -close-from-left-and-right">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask-left"></div>
  8.       <div class="item_mask-right"></div>
  9.       <div class="item_mask-text">sample17</div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -close-from-left-and-right */
  57. .item_box.-close-from-left-and-right .item_mask-left {
  58.   width: 50%;
  59.   height: 100%;
  60.   background-color: rgba(0, 0, 0, 0.8);;
  61.   position: absolute;
  62.   top: 0;
  63.   left: -50%;
  64.   opacity: 0;
  65.   transition: left 0.5s ease, opacity 0.5s ease;
  66. }
  68. .item_box.-close-from-left-and-right .item_link:hover .item_mask-left {
  69.   left: 0;
  70.   opacity: 1;
  71. }
  73. .item_box.-close-from-left-and-right .item_mask-right {
  74.   width: 50%;
  75.   height: 100%;
  76.   background-color: rgba(0, 0, 0, 0.8);
  77.   position: absolute;
  78.   top: 0;
  79.   left: 100%;
  80.   opacity: 0;
  81.   transition: left 0.5s ease, opacity 0.5s ease;
  82.   opacity: 1;
  83. }
  85. .item_box.-close-from-left-and-right .item_link:hover .item_mask-right {
  86.   left: 50%;
  87. }
  89. .item_box.-close-from-left-and-right .item_mask-text {
  90.   opacity: 0;
  91. }
  93. .item_box.-close-from-left-and-right .item_link:hover .item_mask-text {
  94.   transition: opacity 0.6s step-end;
  95.   opacity: 1;
  96. }

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

サンプル
sample18

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

HTML
Copy
  1. <div class="item_box -close-the-door">
  2.   <a class="item_link" href="#">
  3.     <div class="item_content">
  4.       <div class="item_image">
  5.         <img src="image URL" alt="サンプル">
  6.       </div>
  7.       <div class="item_mask">
  8.         <div class="item_mask-text">sample18</div>
  9.       </div>
  10.     </div>
  11.   </a>
  12. </div>
CSS
Copy
  1. .item_box * {
  2.   box-sizing: border-box;
  3. }
  5. .item_box {
  6.   width: 100%;
  7.   max-width: 250px; /* 幅調整 */
  8. }
  10. .item_link {
  11.   display: block;
  12. }
  14. .item_content {
  15.   position: relative;
  16.   overflow: hidden;
  17. }
  19. .item_image img {
  20.   width: 100%;
  21.   height: auto;
  22.   vertical-align: top;
  23. }
  25. .item_mask {
  26.   width: 100%;
  27.   height: 100%;
  28.   position: absolute;
  29.   top: 0;
  30.   left: 0;
  31.   background-color: rgba(0, 0, 0, 0.8);
  32.   opacity: 0;
  33. }
  35. .item_mask-text {
  36.   width: 100%;
  37.   padding: 0.5em;
  38.   font-size: 0.8em;
  39.   color: #fff;
  40.   text-align: center;
  41.   position: absolute;
  42.   top: 50%;
  43.   left: 0;
  44.   transform: translateY(-50%);
  45. }
  47. .item_text {
  48.   margin-top: 10px;
  49.   text-align: center;
  50. }
  52. .item_box .item_link:hover .item_mask {
  53.   opacity: 1;
  54. }
  56. /* -close-the-door */
  57. .item_box.-close-the-door .item_content {
  58.   perspective: 1000px;
  59.   perspective-origin: 0 50%;
  60.   overflow: visible;
  61. }
  63. .item_box.-close-the-door .item_mask {
  64.   transform: rotateY(-90deg);
  65.   transform-origin: 0;
  66.   transition: transform 0.5s ease, opacity 0.5s ease;
  67. }
  69. .item_box.-close-the-door .item_link:hover .item_mask {
  70.   transform: rotateY(0deg);
  71. }

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-Webデザイン
-,