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


সিএসএস এর বিভিন্ন প্রোপার্টি যেমন margin, padding, border, opacity, hover ইত্যাদি ব্যবহার করে খুব সহজেই আকর্ষণীও ও সুন্দর Image Gallery তৈরি করা যায়।

সিএসএস ব্যবহার করে এমন একটি Image Gallery এর ব্যাবহারিক উদাহরন দেখুন।




Image Gallery

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

উদাহরণ

<style>
.child{
   border:1px solid #999;
   margin:5px auto;
   padding:0;
   box-shadow:1px 2px 3px #ccc;
   }

.child:hover{
   border:1px solid #777;
   padding:0;
   box-shadow:1px 2px 3px #666;
   opacity:0.8;
   }
   
.childimg{
   opacity:1.0;
   }

.childp{
   text-align:center;
   color: #222;
   font-weight:700;
   text-decoration:none;
   padding:1em;
   }
   
.expa:hover{
   text-decoration:none;
   }
</style>

<div class="row content expcon" >

  <div class="child">
    <a href="#" class="expa">
      <img src="../images/gallery-one.jpg" class="childimg"/>
      <p class="childp">It's a description of the image.</p>
    </a>
  </div>

  <div class="child">
    <a href="#" class="expa">
      <img src="../images/gallery-two.jpg" class="childimg"/>
      <p class="childp">It's a description of the image.</p>
    </a>
  </div>

  <div class="child">
    <a href="#" class="expa">
      <img src="../images/gallery-three.jpg" class="childimg"/>
      <p class="childp">It's a description of the image.</p>
    </a>
  </div>

  <div class="child">
    <a href="#" class="expa">
      <img src="../images/gallery-four.jpg" class="childimg"/>
      <p class="childp">It's a description of the image.</p>
    </a>
  </div>

</div>

কোড এডিটর