ظاهر کلی برنامه به صورت زیر است:

توضیحات

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

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

image-hover
├── assets
│   ├── fonts
│   │   └── font.ttf
│   └── images
│       ├── day.jpeg
│       └── nature.jpeg
├── index.html
└── styles.css

خواسته های مسئله

• به وسیله پوزیشن دهی تگی که حاوی عنوان تصویر می‌باشد را درون عکس قرار دهید (فاصله تگ از طرف پایین حتما باید صفر باشد).
• ارتفاع تگ حاوی عنوان باید به اندازه ارتفاع تصویر باشد.
• به وسیله flexbox عنوان تصویر را وسط چین کنید.
• بکگراند تگ حاوی عنوان باید از رنگ #360033 تا #0b8793 کشیده شود.
• متن درون تصویر باید اندازه 40px و رنگ #ffffff داشته باشد.
• انحنای تگ حاوی عنوان باید برابر 16px باشد.
• باید به گونه ای باشد که زمانی که روی عکس هاور می‌کنیم محتوا قابل مشاهده باشد و 0.3 ثانیه این کار زمان ببرد.

نکات

• شما تنها مجاز به اعمال تغییرات در فایل styles.css هستید.
• از ایجاد تغییر در فایل index.html خودداری فرمایید.
• به هنگام ثبت پاسخ تنها فایل styles.css خود را آپلود نمایید.