সিএসএস ইমেজ গ্যালারী - Css Image Gallery



সিএসএস ব্যবহার করে খুব সহজেই আকর্ষণীও ও সুন্দর Image Gallery তৈরি করা যায়।





Image Gallery

সিএসএস ব্যবহার করে ওপরের মত একটি Image Gallery তৈরি করার জন্য নিচের কোড গুলো ব্যবহার করুন -

কোড দেখুন

<html>
<head>
<style type="text/css">
div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="image_01.htm">
  <img src="image_01.jpg" alt="Flower Image" width="110" height="90" />
  </a>
  <div class="desc">A description of the image</div>
</div>
<div class="img">
  <a target="_blank" href="image_02.htm">
  <img src="image_02.jpg" alt="Flower Image" width="110" height="90" />
  </a>
  <div class="desc">A description of the image</div>
</div>
<div class="img">
  <a target="_blank" href="image_03.htm">
  <img src="image_03.jpg" alt="Flower Image" width="110" height="90" />
  </a>
  <div class="desc">A description of the image</div>
</div>
<div class="img">
  <a target="_blank" href="image_04.htm">
  <img src="image_04.jpg" alt="Flower Image" width="110" height="90" />
  </a>
  <div class="desc">A description of the image</div>
</div>

</body>
</html>









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.