Bloggerデザイン : グリッドズームカード

1. デザインのタイプ

【Grid Hover Zoom Card】
洗練されたグリッドレイアウトを採用し、ホバー時にカードが滑らかに拡大しながら、詳細情報が浮かび上がるモダンなギャラリーデザインです。

• 

  Olive Oil

  Our premium olive oil is perfect for cooking, marinades, and dressings.

• 

  Strawberry

  Our strawberries are plump, juicy, and bursting with sweet, succulent flavor.

• 

  Cheese

  Our cheese is made from the highest quality milk and carefully aged to perfection, resulting in a creamy texture.

• 

  Bread

  Our bread is perfect for sandwiches, toast, and more.

2. デザインの特徴

• ダイナミックなズーム
  ホバー時にカード全体が1.05倍に拡大し、奥行きのある視覚効果を与えます。
• 階層型オーバーレイ
  画像、グラデーション、テキストの順にz-indexを制御し、視認性と美しさを両立しています。
• Blogger最適化設計
  Bloggerのリストスタイルや画像の余白干渉を完全にリセットした、安定性の高いコードです。

3. 紹介コード

<ul class="blog-card-grid">
  <li class="blog-card">
    <div class="blog-card-cover"></div>
    <img class="blog-card-image" src="画像URL" />
    <div class="blog-card-body">
      <h2>タイトル</h2>
      <p>本文</p>
    </div>
  </li>

  <li class="blog-card">
    <div class="blog-card-cover"></div>
    <img class="blog-card-image" src="画像URL" />
    <div class="blog-card-body">
      <h2>タイトル</h2>
      <p>本文</p>
    </div>
  </li>

  <li class="blog-card">
    <div class="blog-card-cover"></div>
    <img class="blog-card-image" src="画像URL" />
    <div class="blog-card-body">
      <h2>タイトル</h2>
      <p>本文</p>
    </div>
  </li>

  <li class="blog-card">
    <div class="blog-card-cover"></div>
    <img class="blog-card-image" src="画像URL" />
    <div class="blog-card-body">
      <h2>タイトル</h2>
      <p>本文</p>
    </div>
  </li>
</ul>

<style>
.blog-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 !important; margin: 0 !important; list-style: none !important; }
.blog-card { position: relative; width: 100% !important; height: 250px; overflow: hidden; background-color: #141414; transition: transform 1s; padding: 0 !important; margin: 0 !important; }
.blog-card:hover { transform: scale(1.05); }
.blog-card-cover { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 50%, rgba(0,0,0,0.75) 100%); opacity: 0; transition: opacity 1s; z-index: 2; }
.blog-card:hover .blog-card-cover { opacity: 1; }
.blog-card-image { width: 100% !important; height: 100% !important; object-fit: cover; display: block; vertical-align: top; margin: 0 !important; padding: 0 !important; }
.blog-card-body { position: absolute; bottom: 0; width: 100%; color: white; opacity: 0; padding: 0 1rem; box-sizing: border-box; transition: opacity 1s; z-index: 3; }
.blog-card:hover .blog-card-body { opacity: 1; }
.blog-card-body h2 { margin: 0; font-family: "Nunito Sans", sans-serif; color: white !important; }
.blog-card-body p { margin: 0.3rem 0 1rem 0; font-size: 0.9rem; font-family: "Nunito Sans", sans-serif; color: white !important; }
</style>