CSS Overlay: HTML এবং CSS ব্যবহার করে ইমেজ ওভারলে তৈরি করা

ওভারলে (Overlay) একটি ইফেক্ট যা ওয়েবসাইটে ব্যবহারকারীদের পরবর্তী অ্যাকশনের দিকে নির্দেশ করে। সঠিক ব্যবহার ইউজার এক্সপেরিয়েন্স বাড়ায় এবং ব্যবহারকারীদের ওয়েবসাইটে দীর্ঘক্ষণ রাখে।

HTML কাঠামো ব্লক করা

প্রথমে HTML 보일ারপ্লেট তৈরি করি:

<html> 
<head> 
  <style> /* CSS később যোগ করব */ </style> 
</head> 
<body> 
  <div class="container"></div> 
</body> 
</html>

সমস্যা বোঝা

ওভারলে একটি কন্টেইনারের (ইমেজ) ওপর যায় এবং হোবার করলে কিছু করে ব্যবহারকারীকে ইন্টারঅ্যাক্ট করার জন্য নির্দেশ করে। বড় চিত্রে চিন্তা করুন - আমাদের কমপক্ষে দুটি কন্টেইনার লাগবে (ইমেজ এবং ওভারলে), এবং এগুলো একটি বড় কন্টেইনারের ভিতরে থাকবে।

HTML মার্কআপ

<div class="container"> 
  <div class="overlay-outer"> 
    <img class="item-to-overlay" src="file-here" alt="this-is-our-image" /> 
    <div class="overlay-inner"> 
      This is our overlay div. 
    </div> 
  </div> 
</div>

CSS স্টাইলিং (বাইর থেকে ভিতরে)

Body

body { 
  background-color: gray; 
  max-width: 800px; 
  width: 100%; 
  margin: 0 auto; 
}

Div.container

div.container { width: 100%; }

Div.overlay-outer (সর্বाधিক গুরুত্বপূর্ণ)

div.overlay-outer { 
  width: 50%; 
  height: 400px; 
  position: relative; /* এটি "ফেন্স" তৈরি করে */ 
}

Img এলিমেন্ট

ইমেজটি কন্টেইনারের width এবং height-র সাথে মিলাতে হবে। বর্ডার এবং object-fit ব্যবহার করে ক্রপ করা যাবে।

Div.overlay-inner

div.overlay-inner { 
  background-color: #9c1203; 
  height: 100%; 
  width: 100%; 
  opacity: 0; 
  top: 0; 
  left: 0; 
  position: absolute; /* relative পেরেন্টের সাপেক্ষে পজিশন */ 
  padding: 0; 
}

Hover ইফেক্ট

.overlay-outer:hover .overlay-inner { 
  opacity: .8; 
  transition: opacity .5s; 
}

Opacity 0 থেকে 1 এর মাঝে সেট করলে ব্যাকগ্রাউন্ড রঙ ট্রান্সলুসেন্ট হয়। Transition প্রপার্টি ট্রানজিশনকে স্মুথ করে।

সম্পূর্ণ কাজ করে উদাহরণ

.outside { 
  width: 75%; 
  height: 400px; 
  display: inline-block; 
  position: relative; 
  cursor: pointer; 
}

.images { 
  width: 100%; 
  height: 400px; 
  object-fit: cover; 
  border: 5px double black; 
}

.inside { 
  background-color: #9c1203; 
  height: 100%; 
  width: 100%; 
  opacity: 0; 
  top: 0; 
  left: 0; 
  position: absolute; 
  padding: 0; 
}

.inside p { 
  color: #fff; 
  line-height: 150px; 
  font-family: 'arial'; 
  padding: 20px; 
  text-align: left; 
}

.outside:hover .inside { 
  opacity: .8; 
  transition: opacity .5s; 
}

উপসংহার

আপনি সফলভাবে একটি CSS ওভারলে তৈরি করেছেন! CSS এবং HTML ব্যবহার করে ওভারলে তৈরি করার এই পদ্ধতিতে transition, position, object-fit, width, height ইত্যাদি প্রপার্টি ব্যবহার করা হয়েছে।