عکس تار


در این سوال از شما می‌خواهیم تا لوگوی کوئرا را به طرز خاصی نمایش دهید. در صفحه‌ای که شما می‌سازید باید یک لوگوی کوئرا وجود داشته باشد و وقتی که موس وارد عکس می‌شود عکس باید تار شود و زمانی که خارج می‌شود عکس باید دوباره حالت عادی خود بگیرد.

از شما می‌خواهیم تا این سرویس را روی عکسی که به شما داده می‌شود اجرا کنید.

پروژه اولیه🔗

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

blur-image
├── Result.svg
├── index.html
└── quera.svg
Plain text

جزئیات🔗

در صورتی که موس داخل عکس باشد باید دو ویژگی زیر به CSS مربوط به عکس که دارای id برابر با image است اضافه شوند.

filter: blur(8px);
-webkit-filter: blur(8px);
CSS

در غیر این صورت هم نباید چیزی اضافه شود.

نکات🔗

  • توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود. پس دقت کنید که عناصر شناسه‌ی صحیح داشته باشند.

  • فرض کنید سیستم به اینترنت متصل نیست، بنابراین از ارجاع به فایل‌های موجود در وب (CDN ها) خودداری کنید.

  • پروژه را با ساختار زیر ارسال کنید. یعنی باید در Zip ارسالی شما تنها فایل ‍‍index.html وجود داشته باشد.

    [your-zip-file-name].zip
    └── index.html
    Plain text