সিএসএস দিয়ে হোভারে কীভাবে উপাদানগুলি জুম/স্কেল আপ করবেন

transform ব্যবহার করে বিশুদ্ধ CSS দিয়ে হোভারে এলিমেন্ট জুম/স্কেল-আপ করা শিখুন সম্পত্তির রূপান্তর পদ্ধতি:scale() .

হোভারে জুম/স্কেল-আপ করুন

এই বাক্সের উপর আপনার মাউস সরানোর চেষ্টা করুন:

এটি আসল আকারের ঠিক 1.5 গুণ বেড়ে যায় — তাই আপনি যখন এটির উপর আপনার মাউস সরান তখন এটি 50% বড় হয়ে যায়।

CSS transform সম্পত্তির স্কেল পদ্ধতি উপাদানগুলির আকার বৃদ্ধি বা হ্রাস করতে পারে। এটি 3D এবং 2D উভয় ক্ষেত্রেই কাজ করে। এই সহজ উদাহরণে, আমরা 2D ব্যবহার করি।

উপরের উদাহরণটি পুনরায় তৈরি করতে, আমাদের 1টি HTML উপাদান এবং 2টি CSS নিয়ম-সেট প্রয়োজন৷

HTML

প্রথমে zoom-box নামে একটি ক্লাস দিয়ে আপনার HTML উপাদান তৈরি করুন :

<div class="zoom-box"></div>

CSS

তারপর আপনার স্টাইলশীটে এই CSS যোগ করুন:

.zoom-box {
  background-color:#CF4B32;
  width: 100px;
  height: 100px;
  margin: 32px auto;
  transition: transform .2s; /* Animation */
}

.zoom-box:hover {
  transform: scale(1.5);
}

এটাই!

কোড কিভাবে কাজ করে

• প্রথমে, আমরা zoom-box নামে একটি ক্লাস অ্যাট্রিবিউট সহ একটি HTML div উপাদান তৈরি করি। .
• তারপর আমরা জুম বক্স ক্লাসের জন্য দুটি নিয়ম-সেট তৈরি করি, একটি স্ট্যাটিক ডিফল্ট অবস্থার জন্য, .zoom-box এবং ডায়নামিক হোভার স্টেটের জন্য একটি, .zoom-box:hover .
• প্রথম নিয়ম-সেটটি কিছু প্রসাধনী/আকার বৈশিষ্ট্য পায় (height, width, color ) margin সম্পত্তি শুধুমাত্র বাক্সের কেন্দ্রে সারিবদ্ধ করার জন্য (ঐচ্ছিক)।
• .zoom-box এর গুরুত্বপূর্ণ অংশ ক্লাস হল transition transform এর মান সহ সম্পত্তি এবং .2s এর সময়কাল (200 মিলিসেকেন্ড)।
• দ্বিতীয় নিয়মে .zoom-box:hover সেট করুন আমরা transform যোগ করি সম্পত্তি, scale() সহ একটি মান হিসাবে পদ্ধতি। এটি একটি প্যারামিটার লাগে 1.5 যা নির্দেশ করে কতটা বক্স উপাদান হোভার উপর স্কেল করা উচিত. 1.5 আসল আকারের 150% বলার মত।

ব্রাউজার সামঞ্জস্য

এখানে ব্রাউজার ভেন্ডার উপসর্গ যুক্ত এই টিউটোরিয়াল থেকে কোড দেওয়া হল, তাই এটি সমস্ত মূলধারার ব্রাউজারে কাজ করে, Chrome, Firefox, Safari, Opera:

.zoom-box {
	background-color: #cf4b32;
	width: 100px;
	height: 100px;
	margin: 32px auto;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s; /* Animation */
}

.zoom-box:hover {
	-webkit-transform: scale(1.5);
	        transform: scale(1.5);
}

জেনে রাখা ভালো

লক্ষ্য করুন যে বক্স উপাদানটি একই ট্রানজিশনের সময়কাল/টাইমিং সহ উপরে এবং নীচে স্কেল করে, যদিও আমরা শুধুমাত্র transition যোগ করেছি। .zoom-box-এর সম্পত্তি ক্লাস

এটি ঘটে কারণ যখন transition হয় মূল শ্রেণী নির্বাচক (.zoom-box-এ সম্পত্তি যোগ করা হয় ), এর মানগুলি ক্লাসের সাথে সংযুক্ত প্রতিটি অতিরিক্ত নির্বাচকের সাথে স্বয়ংক্রিয়ভাবে যুক্ত হয়, এই ক্ষেত্রে, এটি :hover (এটিকে ছদ্ম-শ্রেণীও বলা হয় )

যদি আপনি শুধুমাত্র transition যোগ করেন :hover-এর সম্পত্তি (ছদ্ম) নির্বাচক শ্রেণী, তারপর এটি শুধুমাত্র স্কেল-আপ অংশকে অ্যানিমেট করে — স্কেল ডাউন নয়। যত তাড়াতাড়ি আপনি বক্স উপাদানের বাইরে যান, এটি হঠাৎ করে শূন্য (0 সেকেন্ড) সময়কালের সাথে ছোট হয়ে যায় — যা আপনি খুব কমই চান, কারণ এটি চোখের জন্য কঠোর।

আপনি যদি আপনার উপাদানের বিভিন্ন অবস্থায় বিভিন্ন অ্যানিমেশন প্রকার এবং সময়কাল ব্যবহার করতে চান (উপর/নিচে), আপনি কেবল একটি transition যোগ করুন :hover-এর সম্পত্তি ছদ্ম-শ্রেণি নির্বাচক, এবং একে বিভিন্ন মান দিন।