এই ম্যানুয়ালটির উদ্দেশ্য হল কিভাবে CSS ব্যবহার করে হোভারে একটি ইমেজ পরিবর্তন করা যায় তা অন্বেষণ করা। সুতরাং, শুরু করা যাক!
সিএসএসে হোভার কি?
:hover হল ছদ্ম-শ্রেণির একটি উপাদান যা এইচটিএমএল উপাদানগুলির অবস্থা পরিবর্তন করতে ব্যবহৃত হয় যখন একটি মাউস এটিকে ট্রিগার করে। এই CSS নির্বাচক প্রাথমিকভাবে স্টাইল বা উপাদান নির্বাচন করতে ব্যবহার করা হয়। যাইহোক, এটি লিঙ্কগুলিতে প্রয়োগ করা যাবে না।
বাক্য গঠন
:hover এর সিনট্যাক্স নিচে দেওয়া হল:
উপাদান : হোভার {
CSS কোড। . .
}
এখানে, ' উপাদান ” সেই উপাদানটিকে বোঝায় যেখানে আপনি হোভার প্রভাব প্রয়োগ করতে চান।
এখন, আমরা CSS ব্যবহার করে হোভারে ইমেজ পরিবর্তন করার ব্যবহারিক উদাহরণে চলে যাব।
উদাহরণ: সিএসএস ব্যবহার করে হোভারে চিত্র কীভাবে পরিবর্তন করবেন?
প্রথমে হোভারে ইমেজ পরিবর্তন করতে, HTML বিভাগে দুটি ছবি যোগ করুন। প্রথম চিত্রটি সক্রিয় অবস্থার জন্য এবং পরেরটি হোভার রাজ্যের জন্য।
ধাপ 1: ছবি যোগ করুন
নির্দিষ্ট উদ্দেশ্যে, আমরা দুটি ছবি যোগ করব, ' ইমেজ1 ' এবং ' ইমেজ2 ”, এবং দ্বিতীয় ছবিতে ক্লাসের নাম বরাদ্দ করুন “ hover_img ”
এইচটিএমএল
< শরীর >< div ক্লাস = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' ক্লাস = 'হোভার_আইএমজি' >
< / div >
< / শরীর >
ধাপ 2: শৈলী চিত্র
এখন, ' ব্যবহার করে উভয় চিত্রের অবস্থান সেট করতে CSS-এ যান অবস্থান 'সম্পত্তি। আমরা এর অবস্থান নির্ধারণ করব ' পরম ” এটির নিকটতম পিতামাতার রেফারেন্স দিয়ে এটিকে একেবারে অবস্থান করতে।
সিএসএস
.img {অবস্থান : পরম ;
}
এটি নিম্নলিখিত ফলাফল দেখাবে:
পরবর্তী ধাপে, আমরা প্রথমটির সামনে দ্বিতীয় চিত্রটি সেট করব। এটি করার জন্য, আমরা চিত্রটির অবস্থান হিসাবে সেট করব ' পরম ' এবং উপরের এবং বাম অবস্থান ' হিসাবে সেট করুন 0 ” এই চিত্রটি ব্যবহার করে প্রথম চিত্রের সামনে স্থাপন করা হয়, তবে আমরা দ্বিতীয় চিত্রটি প্রদর্শন করতে চাই যখন এটিতে একটি মাউস ঘোরায়। সুতরাং, প্রদর্শন মান হিসাবে সেট করুন “ কোনটি 'কাঙ্ক্ষিত ফলাফল দেখাবে:
.hover_img {অবস্থান : পরম ;
শীর্ষ : 0 ;
বাম : 0 ;
প্রদর্শন : কোনটি ;
}
প্রদত্ত কোডের আউটপুট নিম্নরূপ:
দ্বিতীয় ছবিটি সফলভাবে প্রথম ছবির পিছনে লুকিয়ে আছে।
এখন, পরবর্তী ধাপে যান।
ধাপ 3: হোভারে চিত্র পরিবর্তন করুন
পরবর্তী, ব্যবহার করুন ' : ঘোরা ' এবং ' নির্বাচন করুন .img ' নির্বাচিত উপাদানে হোভার প্রয়োগ করতে। তারপরে, দ্বিতীয় চিত্রের ক্লাসের নাম বরাদ্দ করুন ' .hover_img ” এর পরে, বন্ধনীর ভিতরে, প্রদর্শন সম্পত্তির মান হিসাবে সেট করুন “ সঙ্গতিপূর্ণভাবে যা উপাদানটিকে একই লাইনে ফিট করতে বাধ্য করবে:
.img : হোভার .hover_img {প্রদর্শন : সঙ্গতিপূর্ণভাবে ;
}
এখানে ফলাফল যা দেখায় যে ব্যবহারকারী যখন এটিতে হোভার করেন তখন চিত্রটি পরিবর্তিত হয়:
উপরে প্রদত্ত আউটপুট ইঙ্গিত করে যে আমরা সিএসএস ব্যবহার করে হোভারে ইমেজটি সফলভাবে পরিবর্তন করেছি।
উপসংহার
হোভার ব্যবহার করে ছবি পরিবর্তন করা যেতে পারে ' : ঘোরা ছদ্ম-শ্রেণীর উপাদান। এটি করার জন্য, HTML ফাইলে প্রয়োজনীয় ছবি যোগ করুন, CSS ব্যবহার করে একই অবস্থানে সেট করুন এবং তাদের উপর :hover নির্বাচক প্রয়োগ করুন। ফলস্বরূপ, এটির উপর হোভার করার সময় প্রথম চিত্রটি পরিবর্তন হবে। এই নিবন্ধে, আমরা একটি বাস্তব উদাহরণ সহ :hover ব্যবহার করে হোভারে একটি চিত্র কীভাবে পরিবর্তন করতে হয় তা ব্যাখ্যা করেছি।