تابز مدیا | آموزش قدم به قدم برنامه نویسی

Image Gallery

✅ ساختار HTML:


<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>گالری تصاویر با CSS</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: sans-serif;
      margin: 0;
      padding: 20px;
      background: #f4f4f4;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
    }

    .gallery img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .gallery img:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    }
  </style>
</head>
<body>

  <h1>گالری تصاویر با CSS</h1>
  
  <div class="gallery">
    <img src="https://picsum.photos/id/1015/600/400" alt="عکس 1">
    <img src="https://picsum.photos/id/1016/600/400" alt="عکس 2">
    <img src="https://picsum.photos/id/1018/600/400" alt="عکس 3">
    <img src="https://picsum.photos/id/1020/600/400" alt="عکس 4">
    <img src="https://picsum.photos/id/1024/600/400" alt="عکس 5">
    <img src="https://picsum.photos/id/1027/600/400" alt="عکس 6">
  </div>

</body>
</html>

📌 توضیحات:

display: grid → گالری رو به صورت گرید می‌سازه.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); → ریسپانسیو می‌کنه (تصاویر تو موبایل و دسکتاپ خوب نمایش داده می‌شن).
object-fit: cover → باعث میشه عکس‌ها برش بخورن و کشیده نشن.
روی hover → انیمیشن بزرگ‌نمایی (zoom effect) داریم.