CSS transform প্রপার্টির scale() মেথড ব্যবহার করে হবরে এলিমেন্ট জুম/স্কেল-আপ করার পদ্ধতি শিখুন।
Zoom/Scale-Up on Hover
এই বক্সের ওপর মাউস নিন: এটি মূল আকারের ১.৫ গুন (৫০% বড়) হয়ে যাবে।
CSS
transform-এরscale()মেথড এলিমেন্ট ছোট বা বড় করতে পারে (২D এবং ৩D)। এখানে ২D উদাহরণ।
HTML
<div class="zoom-box"></div>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: স্ট্যাটিক স্টেট (সাইজ, কালার, সেন্টারিং용 margin)transition: transform .2s: ২০০মিলিসেকেন্ডে স্মুথ ট্রানজিশন.zoom-box:hover: হবার স্টেটেtransform: scale(1.5)→ ১৫০% স্কেল
ব্রাউজার কম্প্যাটিবিলিটি (ভেন্ডর প্রিফিক্সসহ)
.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;
}
.zoom-box:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}গুড টু নো
transition প্রপার্টি মূল ক্লাসে (.zoom-box) থাকলে এটি :hover পসিউডো-ক্লাসেও অটোমেটিক্যালি প্রয়োগ হয়—স্কেল-আপ এবং স্কেল-ডাউন দুটোই স্মুথ হয়। যদি শুধু :hover-এ দিন, তবে স্কেল-ডাউন এবরাপ্ট (০s) হবে—চোখের জন্য কষ্টদায়ক।
