Bloggerデザイン : ミニマリスト・ホバーギャラリー

1. デザインのタイプ

【Minimalist Hover Gallery / ミニマリスト・ホバーギャラリー】
余計な装飾を削ぎ落とし、画像の美しさを最大限に活かすカード型レイアウトです。

ホバーした瞬間に鮮やかなブルーのオーバーレイが広がり、整然と並んだグリッドの中から直感的にコンテンツを浮き上がらせる、清潔感のあるナビゲーションです。

01

---

Image Title

A little bit of interesting information about this fantastic image

02

---

Image Title

A little bit of interesting information about this fantastic image

03

---

Image Title

A little bit of interesting information about this fantastic image

04

---

Image Title

A little bit of interesting information about this fantastic image

2. デザインの特徴

• スマート・オーバーレイ演出
  通常時は写真そのものを見せ、ホバー時にのみ鮮やかなブルーの背景と情報を表示。ユーザーの視線を邪魔しません。
• 深度を感じるパララックス・ズーム
  マウスを重ねると画像がわずかに拡大（scale(1.08)）。奥行きを感じさせるモーションでクリックを誘発します。
• ポップアップ・キャプション
  タイトルや説明文が下から滑らかに浮き上がるアニメーションを採用。洗練された動きを演出します。
• レスポンシブ・グリッド
  PCでは美しい横並び、スマホでは縦1枚に自動で切り替わります。

3. 紹介コード（コピペ用）

以下のコードをHTMLビューに貼り付けるだけで導入可能です。

<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,900&display=swap');
.tg-full-wrapper { background: #1a1a1f; font-family: 'Poppins', sans-serif; color: #eee; padding: 20px 0; margin: 0; }
#gallery { max-width: 1200px; margin: 0 auto; padding: 1vw; }
#gallery #header { height: 12vh; line-height: 12vh; text-align: center; }
#gallery #logo { font-size: 2.5vh; font-style: italic; color: #fff; }
#gallery #logo:before { content: 'THE'; margin-right: 0.5rem; font-weight: 300; }
#gallery #logo:after { content: 'GALLERY'; font-size: 5vh; font-weight: 900; vertical-align: middle; }
#gallery #images { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 15px; width: 100%; }
#gallery .figure { position: relative; width: calc(50% - 10px); height: 450px; overflow: hidden; cursor: pointer; background: #20f; margin: 0; }
#gallery .image { width: 100%; height: 100%; object-fit: cover; display: block; transition: all 0.5s ease; }
#gallery .caption { position: absolute; inset: 0; pointer-events: none; }
#gallery .body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 30px; }
#gallery .number { color: #fff; font-weight: 300; font-size: 1.2rem; }
#gallery h1.title { color: #fff !important; font-size: 2.2rem; margin: 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
#gallery hr { width: 40%; border: 0; border-bottom: 4px solid rgba(255, 255, 255, 0.4); margin: 20px 0; }
#gallery .text { color: #fff; font-size: 1.6rem; opacity: 0; transform: translateY(30px); transition: all 0.4s ease-in-out; text-align: center; }
#gallery .figure:hover .image { opacity: 0.6; transform: scale(1.08); }
#gallery .figure:hover .text { opacity: 1; transform: translateY(0); }
@media (max-width: 600px) { #gallery .figure { width: 100%; height: 350px; } }
</style>

<div class="tg-full-wrapper">
  <div id="gallery">
    <div id="header"><div id="logo"></div></div>
    <div id="images">
      <div class="figure"><img class="image" src="画像URL"><div class="caption"><div class="body"><div class="number">01</div><hr><h1 class="title">Title</h1><p class="text">Description</p></div></div></div>
      <div class="figure"><img class="image" src="画像URL"><div class="caption"><div class="body"><div class="number">02</div><hr><h1 class="title">Title</h1><p class="text">Description</p></div></div></div>
    </div>
  </div>
</div>