با استفاده از CSS و خاصیت clip-path یک تصویر مربع را به شکل دایره بریده و هنگام هاور با یک انتقال (transition) اندازه دایره را کمی بزرگتر کنید.
6.0 بازدید آخرین ویرایش در 220 روز قبل ساعت 01:50 0.0
تصویر را با عرض و ارتفاع ثابت قرار دهید، سپس از clip-path: circle(50% at 50% 50%); برای برش دایرهای استفاده کنید و object-fit: cover; را تنظیم کنید تا تصویر داخل شکل درست نمایش داده شود؛ برای افکت هاور میتوانید clip-path را به circle(60% at 50% 50%); تغییر دهید یا از transform: scale(1.05); همراه با transition: 0.25s ease استفاده کنید. برای سازگاری بهتر مرورگرها -webkit-clip-path را اضافه کنید و مطمئن شوید عنصر تصویری display: block; و در صورت نیاز overflow:hidden روی کانتینر تنظیم شده باشد.
توسط پژوهشگر در 220 روز قبل ساعت 01:50 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای بریدن یک تصویر مربع به شکل دایره با CSS از clip-path: circle(50% at 50% 50%) استفاده کنید و عرض و ارتفاع را ثابت نگه دارید. برای نمایش درست تصویر از object-fit: cover استفاده کنید و مطمئن شوید که تصویر داخل کانتینر display: block باشد و در صورت نیاز overflow: hidden را اعمال کنید. برای افکت هاور و افزایش اندازه دایره، میتوانید clip-path را به circle(60% at 50% 50%) تغییر دهید یا از transform: scale(1.05) همراه با transition: 0.25s ease استفاده کنید. برای سازگاری بهتر مرورگرها، وبکیت نسخه webkit-clip-path را هم اضافه کنید و در نهایت از یک کانتینر برای محصور شدن استفاده کنید.
گزارش