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

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

پروژه اولیه

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

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

جزئیات

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

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

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

نکات

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

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

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

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