CSS :hover ইফেক্টগুলোর ব্যাখ্যা এবং উদাহরণ

ওয়েব ডেভেলপমেন্ট
1

CSS-এ :hover পসিউডো-ক্লাস ব্যবহার করে যেকোনো HTML এলিমেন্টে মাউস রাখা হলে বিভিন্ন স্টাইল পরিবর্তন করা যায়। এটি ইন্টারেকটিভ ডিজাইনের জন্য অত্যন্ত গুরুত্বপূর্ণ। নিচে CSS :hover ইফেক্টগুলোর ব্যাখ্যা এবং উদাহরণ দেওয়া হলো।

১. রঙ পরিবর্তনএকটি এলিমেন্টে মাউস রাখলে এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে নিচের CSS কোড ব্যবহার করা যায়:

button:hover {
    background-color: blue;
    color: white;
}

২. টেক্সটের আন্ডারলাইন দেখানো লিংকের উপর মাউস রাখলে আন্ডারলাইন দেখানোর জন্য:

a:hover {
    text-decoration: underline;
}

৩. ইমেজ জুম ইফেক্ট মাউস রাখলে ইমেজ বড় দেখানোর জন্য:

img:hover {
    transform: scale(1.2);
    transition: 0.3s ease-in-out;
}

৪. বর্ডার পরিবর্তন মাউস রাখলে বর্ডার স্টাইল পরিবর্তন করতে:

div:hover {
    border: 2px solid red;
}

৫. বাটন এনিমেশন মাউস রাখলে বাটনের আকার পরিবর্তন:

button:hover {
    padding: 15px 25px;
    transition: all 0.3s ease;
}

৬. টেক্সট কালার পরিবর্তন

p:hover {
    color: green;
}

৭. বক্স শ্যাডো যোগ করা

div:hover {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

৮. রোটেট ইফেক্ট

img:hover {
    transform: rotate(15deg);
    transition: 0.3s;
}

৯. অস্বচ্ছতা পরিবর্তন (Opacity Effect)

img:hover {
    opacity: 0.5;
}

১০. ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট পরিবর্তন

div:hover {
    background: linear-gradient(45deg, red, blue);
}

hover পসিউডো-ক্লাস ব্যবহার করে ওয়েবসাইটে ইন্টারেক্টিভ এবং আকর্ষণীয় ডিজাইন তৈরি করা যায়।

3 Likes