こんにちは、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>
おわりに
下からせりあがるような動きで目を引くことができるので
デモのような商品キャッチコピーやメッセージを
目立たせたい場合などに特に役立つレイアウトかと思います。
ポップアップ内のフォントサイズを落とすことで
商品詳細の表示などにも応用可能ですので
自分でコードが書ける方はぜひアレンジにも挑戦してみてください。
コメント