【CSS】マウスオーバーで下からテキストポップアップさせるおしゃれなデザインの実装法

こんにちは、daimaです。 本日はマウスオーバーで画像の下からテキストレイヤーがポップアップする おしゃれなレイアウトの実装方法をご紹介します。

使用する技術はHTMLとCSSのみ! どんなサイトにもコピペで簡単に組み込み可能ですので WEBサイトのデザインにお悩みの方はぜひ一度お試しください。

デモとソースコード

  <section id="sc_product" class="popUp">
    <div class="popUp_inner js_scrlTarget op_fromBelow">

      <div class="popUp_wrapper js_openParent">
        <div class="popUp_wrapper_wrapper">
          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://epochz.com" class="hp_coverLink" target="_blank"></a>
              <img src="image/c1.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  <div class="op_text">
                    さりげない<br>個性と<br>豊かな<br>座り心地
                  </div>
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://epochz.com" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                ○○工房
              </div>
              <div class="op_main">
                ラウンドチェア
              </div>
            </div>
            
          </div>

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://www.instagram.com/bellenaru/" class="hp_coverLink" target="_blank"></a>
              <img src="image/c2.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  シャープなのに<br>温かみもある<br>デザイン
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://www.instagram.com/bellenaru/" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                ××工房
              </div>
              <div class="op_main">
                ダイニングチェア
              </div>
            </div>
            
          </div>

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://www.ojico.net" class="hp_coverLink" target="_blank"></a>
              <img src="image/c3.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  リゾート気分を<br>演出する<br>一脚
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://www.ojico.net" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                △△工房
              </div>
              <div class="op_main">
                ナチュラルチェア
              </div>
            </div>
            
          </div>

        </div>
        <div class="popUp_wrapper_wrapper js_openTarget">

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://epochz.com" class="hp_coverLink" target="_blank"></a>
              <img src="image/c1.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  <div class="op_text">
                    さりげない<br>個性と<br>豊かな<br>座り心地
                  </div>
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://epochz.com" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                ○○工房
              </div>
              <div class="op_main">
                ラウンドチェア
              </div>
            </div>
            
          </div>

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://www.instagram.com/bellenaru/" class="hp_coverLink" target="_blank"></a>
              <img src="image/c2.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  シャープなのに<br>温かみもある<br>デザイン
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://www.instagram.com/bellenaru/" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                ××工房
              </div>
              <div class="op_main">
                ダイニングチェア
              </div>
            </div>
            
          </div>

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://www.ojico.net" class="hp_coverLink" target="_blank"></a>
              <img src="image/c3.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  リゾート気分を<br>演出する<br>一脚
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://www.ojico.net" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                △△工房
              </div>
              <div class="op_main">
                ナチュラルチェア
              </div>
            </div>
            
          </div>

        </div>

      </div>
    </div>
  </section>

  <section id="sc_product" class="popUp">
    <div class="popUp_inner js_scrlTarget op_fromBelow">

      <div class="popUp_wrapper js_openParent">
        <div class="popUp_wrapper_wrapper">
          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://epochz.com" class="hp_coverLink" target="_blank"></a>
              <img src="image/c1.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  <div class="op_text">
                    さりげない<br>個性と<br>豊かな<br>座り心地
                  </div>
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://epochz.com" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                ○○工房
              </div>
              <div class="op_main">
                ラウンドチェア
              </div>
            </div>
            
          </div>

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://www.instagram.com/bellenaru/" class="hp_coverLink" target="_blank"></a>
              <img src="image/c2.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  シャープなのに<br>温かみもある<br>デザイン
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://www.instagram.com/bellenaru/" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                ××工房
              </div>
              <div class="op_main">
                ダイニングチェア
              </div>
            </div>
            
          </div>

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://www.ojico.net" class="hp_coverLink" target="_blank"></a>
              <img src="image/c3.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  リゾート気分を<br>演出する<br>一脚
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://www.ojico.net" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                △△工房
              </div>
              <div class="op_main">
                ナチュラルチェア
              </div>
            </div>
            
          </div>

        </div>
        <div class="popUp_wrapper_wrapper js_openTarget">

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://epochz.com" class="hp_coverLink" target="_blank"></a>
              <img src="image/c1.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  <div class="op_text">
                    さりげない<br>個性と<br>豊かな<br>座り心地
                  </div>
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://epochz.com" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                ○○工房
              </div>
              <div class="op_main">
                ラウンドチェア
              </div>
            </div>
            
          </div>

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://www.instagram.com/bellenaru/" class="hp_coverLink" target="_blank"></a>
              <img src="image/c2.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  シャープなのに<br>温かみもある<br>デザイン
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://www.instagram.com/bellenaru/" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                ××工房
              </div>
              <div class="op_main">
                ダイニングチェア
              </div>
            </div>
            
          </div>

          <div class="popUp_item">

            <div class="popUp_item_image">
              <a href="https://www.ojico.net" class="hp_coverLink" target="_blank"></a>
              <img src="image/c3.jpg" alt="" class="op_img">
              <div class="popUp_item_image_text">
                <div class="op_text">
                  リゾート気分を<br>演出する<br>一脚
                </div>
              </div>
            </div>

            <div class="popUp_item_texts">
              <a href="https://www.ojico.net" class="hp_coverLink" target="_blank"></a>
              <div class="op_sub">
                △△工房
              </div>
              <div class="op_main">
                ナチュラルチェア
              </div>
            </div>
            
          </div>

        </div>

      </div>
    </div>
  </section>

おわりに

下からせりあがるような動きで目を引くことができるので デモのような商品キャッチコピーやメッセージを 目立たせたい場合などに特に役立つレイアウトかと思います。

ポップアップ内のフォントサイズを落とすことで 商品詳細の表示などにも応用可能ですので 自分でコードが書ける方はぜひアレンジにも挑戦してみてください。