菜菜的旅遊日記

<p>    /* ================= 基礎設定 ================= */<br>
    body {<br>
      margin: 0;<br>
      padding: 0;<br>
      background-color: #f8f9fa;<br>
    }</p>
<p>    /* 相簿大容器 */<br>
    .tsai-gallery-wrapper {<br>
      max-width: 1200px;<br>
      margin: 0 auto;<br>
      padding: 40px 20px;<br>
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;<br>
    }</p>
<p>    /* 帥氣的標題 */<br>
    .gallery-title {<br>
      text-align: center;<br>
      font-size: 2.5rem;<br>
      color: #2c3e50;<br>
      margin-bottom: 40px;<br>
      letter-spacing: 3px;<br>
      font-weight: 800;<br>
      text-transform: uppercase;<br>
    }</p>
<p>    /* ================= 瀑布流排版核心 ================= */<br>
    .tsai-gallery {<br>
      column-count: 3; /* 電腦版顯示 3 欄 */<br>
      column-gap: 20px;<br>
    }</p>
<p>    /* 響應式設計：平版與手機自動縮減欄位 */<br>
    @media (max-width: 900px) { .tsai-gallery { column-count: 2; } }<br>
    @media (max-width: 600px) { .tsai-gallery { column-count: 1; } }</p>
<p>    /* 單張照片外框 */<br>
    .gallery-item {<br>
      break-inside: avoid;<br>
      margin-bottom: 20px;<br>
      position: relative;<br>
      overflow: hidden;<br>
      border-radius: 16px; /* 圓角看起來更現代 */<br>
      cursor: pointer;<br>
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);<br>
      transition: box-shadow 0.3s ease;<br>
    }</p>
<p>    .gallery-item:hover {<br>
      box-shadow: 0 15px 30px rgba(0,0,0,0.2);<br>
    }</p>
<p>    /* 圖片本身 */<br>
    .gallery-item img {<br>
      width: 100%;<br>
      height: auto;<br>
      display: block;<br>
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* 順滑的放大效果 */<br>
    }</p>
<p>    /* 懸浮時放大圖片 */<br>
    .gallery-item:hover img {<br>
      transform: scale(1.08);<br>
    }</p>
<p>    /* 黑色半透明遮罩 */<br>
    .overlay {<br>
      position: absolute;<br>
      inset: 0;<br>
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%);<br>
      opacity: 0;<br>
      transition: opacity 0.4s ease;<br>
      display: flex;<br>
      align-items: flex-end;<br>
      padding: 20px;<br>
    }</p>
<p>    /* 懸浮時顯示遮罩 */<br>
    .gallery-item:hover .overlay {<br>
      opacity: 1;<br>
    }</p>
<p>    /* 照片上的文字 */<br>
    .overlay span {<br>
      color: #ffffff;<br>
      font-size: 1.4rem;<br>
      font-weight: 600;<br>
      text-shadow: 2px 2px 8px rgba(0,0,0,0.6);<br>
      transform: translateY(15px);<br>
      transition: transform 0.4s ease;<br>
    }</p>
<p>    .gallery-item:hover .overlay span {<br>
      transform: translateY(0); /* 文字從底部滑上來 */<br>
    }</p>
<p>    /* ================= 燈箱 (Lightbox) 樣式 ================= */<br>
    .lightbox {<br>
      display: none;<br>
      position: fixed;<br>
      z-index: 99999;<br>
      padding-top: 50px;<br>
      left: 0;<br>
      top: 0;<br>
      width: 100%;<br>
      height: 100%;<br>
      background-color: rgba(0, 0, 0, 0.85);<br>
      backdrop-filter: blur(8px); /* 超有質感的毛玻璃模糊背景 */<br>
    }</p>
<p>    .lightbox-content {<br>
      margin: auto;<br>
      display: block;<br>
      max-width: 90%;<br>
      max-height: 80vh;<br>
      border-radius: 8px;<br>
      box-shadow: 0 0 40px rgba(0,0,0,0.5);<br>
      animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);<br>
    }</p>
<p>    /* 燈箱彈出動畫 */<br>
    @keyframes popIn {<br>
      from { transform: scale(0.8); opacity: 0; }<br>
      to { transform: scale(1); opacity: 1; }<br>
    }</p>
<p>    /* 關閉按鈕 */<br>
    .close-btn {<br>
      position: absolute;<br>
      top: 20px;<br>
      right: 40px;<br>
      color: #f1f1f1;<br>
      font-size: 50px;<br>
      font-weight: bold;<br>
      cursor: pointer;<br>
      transition: 0.3s;<br>
    }</p>
<p>    .close-btn:hover { color: #ffeb3b; }</p>
<p>    #lightbox-caption {<br>
      margin: auto;<br>
      display: block;<br>
      width: 80%;<br>
      text-align: center;<br>
      color: #eee;<br>
      padding: 15px 0;<br>
      font-size: 1.5rem;<br>
      letter-spacing: 2px;<br>
    }</p>
<div class="tsai-gallery-wrapper">
<h2 class="gallery-title">TRAVEL – 菜菜的旅遊日記</h2>
<div class="tsai-gallery">
<div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="旅遊照片"><p></p>
<div class="overlay"><span>漫步瑞士群山</span></div>
<p></p></div>
<div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1506197603052-3cc9c3a201bd?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="旅遊照片"><p></p>
<div class="overlay"><span>峽谷探險</span></div>
<p></p></div>
<div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="旅遊照片"><p></p>
<div class="overlay"><span>巴黎浪漫夜</span></div>
<p></p></div>
<div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="旅遊照片"><p></p>
<div class="overlay"><span>私房海灘秘境</span></div>
<p></p></div>
<div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1512453979798-5ea266f8880c?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="旅遊照片"><p></p>
<div class="overlay"><span>沙漠星空</span></div>
<p></p></div>
<div class="gallery-item">
        <img src="https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-4.0.3&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="旅遊照片"><p></p>
<div class="overlay"><span>在路上</span></div>
<p></p></div>
<p></p></div>
<div id="tsai-lightbox" class="lightbox">
      <span class="close-btn">×</span><br>
      <img class="lightbox-content" id="lightbox-img"><p></p>
<div id="lightbox-caption"></div>
<p></p></div>
<p></p></div>
<p>    document.addEventListener('DOMContentLoaded', function() {<br>
      const lightbox = document.getElementById('tsai-lightbox');<br>
      const lightboxImg = document.getElementById('lightbox-img');<br>
      const captionText = document.getElementById('lightbox-caption');<br>
      const closeBtn = document.querySelector('.close-btn');<br>
      const galleryItems = document.querySelectorAll('.gallery-item');</p>
<p>      // 點擊每張照片時開啟燈箱<br>
      galleryItems.forEach(item =&gt; {<br>
        item.addEventListener('click', function() {<br>
          // 取得圖片網址與標題<br>
          const img = this.querySelector('img');<br>
          const title = this.querySelector('.overlay span').innerText;</p>
<p>          // 顯示燈箱<br>
          lightbox.style.display = 'block';<br>
          lightboxImg.src = img.src;<br>
          captionText.innerHTML = title;</p>
<p>          // 鎖定背景滾動<br>
          document.body.style.overflow = 'hidden';<br>
        });<br>
      });</p>
<p>      // 點擊右上角關閉按鈕<br>
      closeBtn.addEventListener('click', closeLightbox);</p>
<p>      // 點擊背景任何一處也能關閉燈箱<br>
      lightbox.addEventListener('click', function(e) {<br>
        if (e.target !== lightboxImg) {<br>
          closeLightbox();<br>
        }<br>
      });</p>
<p>      // 關閉燈箱的函數<br>
      function closeLightbox() {<br>
        lightbox.style.display = 'none';<br>
        document.body.style.overflow = 'auto'; // 恢復背景滾動<br>
      }<br>
    });</p>