چگونه ایجاد کنیم: بزرگنمایی در حالت hover

آموزش چگونه از CSS برای بزرگنمایی در حالت hover استفاده کنیم.

بزرگنمایی در حالت hover

لطفاً ماوس را بر روی قاب سبز قرار دهید:

چگونه در حالت hover بزرگنمایی کنیم

<style>
.zoom {
  پادپایی: 50 پیکسل;
  رنگ پس‌زمینه: سبز;
  گذر زمان: تغییر مقیاس 0.2 ثانیه; /* انیمیشن */
  عرض: 200 پیکسل;
  ارتفاع: 200 پیکسل;
  مجردار: خودکار;
}
.zoom:hover {
  تغییر مقیاس: مقیاس 1.5; /* (150% بزرگنمایی - توجه: اگر بزرگنمایی بیش از حد باشد، از محدوده视‌واقعی خارج می‌شود) */
}
</style>
<div class="zoom"></div>

آزمایش کنید

صفحات مرتبط

آموزش:تغییرات CSS