Bloggerデザイン : レスポンシブイメージギャラリー

1. デザインのタイプ

【Modern Image Grid Layout
複雑なグリッドを組み合わせた、タイル状の画像ギャラリーです。マウスホバーに合わせて画像が鮮明に浮かび上がり、視覚的な奥行きを感じさせる重厚なエフェクトが特徴です。

Waterfall

Hills

Ocean

Rain

Snow Mountains

Trees

Beach

2. デザインの特徴

• 不規則なグリッド配置
  grid-row や grid-column を組み合わせ、単調な並びではないリズム感のある画像レイアウトを実現しています。
• 
  background-blend-mode: hard-light を採用し、1秒かけて色が暗闇から浮かび上がる重厚な演出です。
• ホバーで画像がスクロール
  ホバー時に画像の表示位置を top から center へスライドさせます。
• レスポンシブ完全対応
  画面サイズに応じてグリッドを最適化。スマホやタブレットでもレイアウトが崩れず、快適なブラウジングを提供します。

3. 紹介コード

ビジュアルを主役にしたセクションに最適です。CSSの1秒（1s）設定が独特のタメを生み、ユーザーの目を引きつけます。

<div class="vol8-scope">
  <div class="vol8-container">
    <div class="gallery">
      <div class="box row-2" style="background-image: url(画像URL1)">Waterfall</div>
      <div class="box col-2" style="background-image: url(画像URL2)">Hills</div>
      <div class="box" style="background-image: url(画像URL3)">Ocean</div>
      <div class="box row-2" style="background-image: url(画像URL4)">Rain</div>
      <div class="box col-2" style="background-image: url(画像URL5)">Snow Mountains</div>
      <div class="box" style="background-image: url(画像URL6)">Trees</div>
      <div class="box col-2" style="background-image: url(画像URL7)">Beach</div>
    </div>
  </div>
</div>

<style>
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@900&display=swap");

.vol8-scope {
  all: initial;
  display: block;
  margin: 40px auto;
  max-width: 1000px;
  font-family: "Bodoni Moda", serif;
}

.vol8-container {
  background: linear-gradient(to right, #041308, #0b3317);
  padding: 20px;
  box-sizing: border-box;
}

.vol8-container .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;
  gap: 10px;
}

.vol8-container .box {
  background-size: cover;
  background-position: top;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
  background-blend-mode: hard-light;
  transition: all 1s ease-in-out;
  cursor: pointer;
  box-sizing: border-box;
}

.vol8-container .box:hover {
  background-color: #999;
  background-position: center;
  box-shadow: 0 0 4px #fff;
}

.vol8-container .row-2 { grid-row: span 2; }
.vol8-container .col-2 { grid-column: span 2; }

@media screen and (max-width: 1024px) {
  .vol8-container .gallery {
    grid-auto-rows: 220px;
  }
  .vol8-container .box {
    grid-row: span 1 !important;
    grid-column: span 3 !important;
  }
}
</style>