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 মিডিয়া কোয়াইয়ার দ্বারা রেসপনসিভ গ্যালারি তৈরি করতে কিভাবে, ডেস্কটপ, ট্যাবলেট এবং স্মার্টফোনে সবচেয়ে ভালো দেখা যায়。