パーツ番号 07-01-05 ・ CSSのみ

モザイクタイルギャラリー

大小のタイルを組み合わせたグリッドで、ホバーすると明るく浮き上がる。WordPressのフォトギャラリーページに変化をつけたいときに。

galleryhovercss

プレビュー

ソースコード

HTML

<div class="d07-01-05-grid">
          <div class="d07-01-05-tile d07-01-05-big"><span>🌋</span></div>
          <div class="d07-01-05-tile d07-01-05-s1"><span>🍁</span></div>
          <div class="d07-01-05-tile d07-01-05-s2"><span>❄️</span></div>
          <div class="d07-01-05-tile d07-01-05-wide"><span>🌾</span></div>
          <div class="d07-01-05-tile d07-01-05-s3"><span>🌺</span></div>
        </div>

CSS

.d07-01-05-grid{display:grid;grid-template-columns:repeat(3,72px);grid-auto-rows:60px;gap:8px}
        .d07-01-05-tile{border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;filter:brightness(.92);transition:filter .3s ease,transform .3s ease,box-shadow .3s ease}
        .d07-01-05-tile span{font-size:26px}
        .d07-01-05-big{grid-column:1/3;grid-row:1/3;background:linear-gradient(135deg,#ef4444,#f97316)}
        .d07-01-05-big span{font-size:44px}
        .d07-01-05-s1{background:linear-gradient(135deg,#f59e0b,#d97706)}
        .d07-01-05-s2{background:linear-gradient(135deg,#38bdf8,#0ea5e9)}
        .d07-01-05-wide{grid-column:2/4;background:linear-gradient(135deg,#84cc16,#16a34a)}
        .d07-01-05-s3{background:linear-gradient(135deg,#ec4899,#f43f5e)}
        .d07-01-05-tile:hover{filter:brightness(1.08);transform:translateY(-4px) scale(1.03);box-shadow:0 10px 22px rgba(0,0,0,.2);z-index:2}

クラス名 .d07-01-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。