مكتبة الصور CSS

يمكن استخدام CSS لإنشاء مكتبة الصور.

زهور ذهنية
زهور ذهنية
زهور حمراء
زهور حمراء
نباتات الزهور والنباتات
نباتات الزهور والنباتات
نباتات الزهور والنباتات
نباتات الزهور والنباتات

مكتبة الصور

هذه مكتبة الصور هي مكتبة تم إنشاؤها باستخدام CSS:

مثال

<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
  <a target="_blank" href="/i/photo/tulip-yellow.jpg">
    <img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">إضافة وصف الصورة هنا</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">إضافة وصف الصورة هنا</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">إضافة وصف الصورة هنا</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">إضافة وصف الصورة هنا</div>
</div>
</body>
</html>

جربها بنفسك

مزيد من الأمثلة

مكتبة الصور التفاعلية
كيفية إنشاء مكتبة صور تفاعلية باستخدام استعلام وسائل الإعلام CSS، لجعلها تبدو جيدة على أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والهواتف الذكية.