CSS - Image Gallery معرض الصور

CSS - معرض الصور (Image Gallery)

🔸 معرض الصور (Image Gallery) هو مجموعة من الصور يتم عرضها بطريقة منظمة داخل الشبكة أو الأعمدة، ويمكنك تنسيقه باستخدام CSS ليظهر بشكل جميل ومتجاوب.

🧪 مثال أساسي على معرض صور باستخدام float

<div class="gallery">
  <a target="_blank" href="img1.jpg">
    <img src="img1.jpg" alt="صورة 1" width="600" height="400">
  </a>
  <div class="desc">وصف الصورة الأولى</div>
</div>

.gallery {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.desc {
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

📌 هذا الكود يقسم الصفحة إلى ثلاثة أعمدة، وكل صورة تأخذ ثلث العرض، وتحتها وصف.

---

🧱 استخدام Flexbox لمعرض متجاوب

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

.column img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

<div class="row">
  <div class="column">
    <img src="img1.jpg" alt="صورة">
  </div>
  <div class="column">
    <img src="img2.jpg" alt="صورة">
  </div>
  <div class="column">
    <img src="img3.jpg" alt="صورة">
  </div>
</div>

📌 باستخدام Flexbox، يصبح المعرض أكثر مرونة ويتكيف مع حجم الشاشة بسهولة.

---

💡 ملاحظات هامة

• استخدم max-width: 100% وheight: auto لضمان استجابة الصور.
• يمكنك إضافة تأثيرات عند المرور مثل opacity أو transform.
• اجعل الصور داخل روابط <a> لفتحها بالحجم الكامل عند النقر.