ظاهر کلی برنامه به صورت زیر است:  # توضیحات علی که به تازگی طراحی وب را شروع کرده است قصد دارد برای تصاویری که روی صفحه وب قرار داده است یک هاور زیبا که حاوی عنوان آن تصویر می‌باشد طراحی کند اما چون هنوز به صورت کامل CSS را نیاموخته است به کمک شما نیاز دارد تا بتواند این کار را به نحو احسن انجام دهد. # پروژه اولیه پروژه اولیه را از [این لینک](/contest/assignments/53486/download_problem_initial_project/182389/) دانلود کنید. <details class="green"> <summary> ساختار فایل‌ها </summary> ``` image-hover ├── assets │ ├── fonts │ │ └── font.ttf │ └── images │ ├── day.jpeg │ └── nature.jpeg ├── index.html └── styles.css ``` </details> <details class="violet"> <summary> راه اندازی پروژه</summary> + ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید. + سپس فایل `index.html` را در مرورگر خود باز کنید. </details> # خواسته های مسئله + به وسیله پوزیشن دهی تگی که حاوی عنوان تصویر می‌باشد را درون عکس قرار دهید (فاصله تگ از طرف پایین حتما باید صفر باشد). + ارتفاع تگ حاوی عنوان باید به اندازه ارتفاع تصویر باشد. + به وسیله `flexbox` عنوان تصویر را وسط چین کنید. + بکگراند تگ حاوی عنوان باید از رنگ `#360033` تا `#0b8793` کشیده شود. + متن درون تصویر باید اندازه `40px` و رنگ `#ffffff` داشته باشد. + انحنای تگ حاوی عنوان باید برابر `16px` باشد. + باید به گونه ای باشد که زمانی که روی عکس هاور می‌کنیم محتوا قابل مشاهده باشد و `0.3` ثانیه این کار زمان ببرد. # نکات + شما تنها مجاز به اعمال تغییرات در فایل `styles.css` هستید. + از ایجاد تغییر در فایل `index.html` خودداری فرمایید. + به هنگام ثبت پاسخ تنها فایل `styles.css` خود را آپلود نمایید.

حل سؤال در بانک سؤالات