CSS Position এবং Hover Effect: একটি সহজ উদাহরণ

আজকের আমরা একটি চমৎকার CSS Position ও Hover Effect কনসেপ্ট নিয়ে আলোচনা করব। যদি আপনি ওয়েব ডিজাইনে নতুন হয়ে থাকেন, তাহলে এই পোস্টটি আপনাকে বুঝতে সাহায্য করবে কিভাবে position, transform এবং transition ব্যবহার করে একটি ইমেজের উপর সুন্দর overlay effect তৈরি করা যায়।

🔧 ব্যবহৃত HTML কাঠামো

প্রথমে আমরা একটি div ক্লাস box তৈরি করেছি যার ভিতরে একটি ইমেজ এবং একটি overlay div রয়েছে।

<div class="box">
    <img src="../beautiful-golf-course.webp" alt="beautiful-golf-course">
    <div class="box-overlay"></div>
</div>

এই কাঠামোর মূল উদ্দেশ্য হলো - একটি ইমেজের উপর যখন মাউস নিয়ে যাওয়া হবে তখন overlay দেখা যাবে।

---

🎨 CSS বিশ্লেষণ

*{
    margin: 0;
    padding: 0;
}

প্রথমেই আমরা সবকিছুতে margin ও padding 0 করে দিচ্ছি যাতে layout গুলো ক্লিন থাকে।

📦 .box ক্লাস

.box {
    width: 300px;
    height: 200px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}

• position: relative; ব্যবহার করা হয়েছে যাতে overlay div কে absolute করে box-এর ভিতরে স্থাপন করা যায়।

• overflow: hidden; দিয়ে ইমেজের বাইরে কিছু গেলে তা লুকিয়ে রাখা হয়।

🖼️ ইমেজ সেটিং

.box img {
    width: 100%;
}

ইমেজকে box-এর পুরো width অনুযায়ী স্কেল করে নিচ্ছে।

🌈 Overlay সেটআপ

.box .box-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: aqua;
    transform: translateY(-100%);
    opacity: 0.5;
    transition: 0.7s;
}

• position: absolute; ও top: 0; left: 0; দিয়ে overlay-কে box-এর উপর সম্পূর্ণভাবে বসানো হয়েছে।

• transform: translateY(-100%); এর মানে হলো overlay ডিভটি উপরের দিকে ১০০% সরিয়ে রাখা হয়েছে, ফলে এটি শুরুতে দেখা যায় না।

• opacity: 0.5; এফেক্টকে স্বচ্ছ রাখে।

• transition: 0.7s; এর মানে, হোভার করার সময় overlay ধীরে ধীরে নিচে নামবে।

🖱️ Hover এফেক্ট

.box:hover .box-overlay {
    transform: translateX(0);
}

হোভার করার সময় overlay translateY(-100%) থেকে translateX(0) হয়ে যাবে — অর্থাৎ এটি স্লাইড করে আসবে।

❗ বিঃদ্রঃ: এখানে ছোট একটা ভুল আছে — হোভার করার সময় translateX(0) দিলে overlay ডিভটি নিচে নামবে না, কারণ এক্স অক্ষ বরাবর পরিবর্তন হচ্ছে। যদি overlay-কে উপরের দিক থেকে নিচে আনার ইফেক্ট দেওয়া হয়, তাহলে transform: translateY(0) দিতে হবে।

সঠিক কোড হবে:

.box:hover .box-overlay {
    transform: translateY(0);
}

---