Отже, у нас буде шість різних прикладів підписів до зображень. HTML-частина нашого проекту виглядає так (розгорніть, щоб побачити):
Всі стилі ми збережемо в окремому документі style.css. щоб не навантажувати HTML-сторінку. Не забудьте включити на нього посилання всередині тега
Приступимо до створення стилю CSS:
Додамо кілька загальних характеристик для наших box-ів, а також float: left для вирівнювання елемента по лівому краю, щоб інші бокси слідували один за одним. Не варто забувати і про властивості overflow із значенням hidden - завдяки цьому все те, що знаходиться за межами боксу, буде заховано.
Також встановлюємо властивість transition для всіх картинок:
Частина перша
Тепер перейдемо до підписів: до них також будуть застосовані деякі загальні характеристики і, звичайно ж, властивість transition. Замість того, щоб використовувати параметр opacity. ми краще згадаємо про кольорову модель RGBA, де для альфа-каналу, що відповідає за прозорість кольору, задамо значення 0.7. щоб зробити фон для підпису злегка прозорим, не зачіпаючи при цьому текст:
Наш перший приклад, мабуть, один з найпростіших - підпис до фото з'являється знизу вверх при наведенні курсору миші. Для неї ми встановимо фіксовану висоту в 40px і нижнє положення елемента в -40px. щоб воно було приховано під зображенням, коли курсор не наведений:
У другому варіанті підпис збігається по ширині і висоті із зображенням - 200 × 200 px, і «виїжджає» зверху вниз:
У цьому прикладі ми розглянемо ефект плавного загасання. Для вихідного стану встановлюємо нульове значення прозорості opacity:
Четвертий заголовок буде «виїжджати» з одного боку в іншу:
Тут ми застосуємо ефект обертання, при цьому провертатися буде не тільки підпис, але і сама картинка. Для цього нам потрібно додати властивість transform. встановивши значення повороту на -180deg:
В останньому випадку ми використовуємо так званий ефект масштабу. І якщо в попередніх варіантах текст з'являвся одночасно з фоном, то зараз він буде відображатися з затримкою і частинами - спочатку заголовок h3. а слідом текст p:
Частина друга: пожвавлення
В цьому розділі уроку ми визначимо поведінку кожного з елементів при наведенні курсору на відповідне зображення.
поведінка 1
Для того, щоб в першому прикладі підпис «виїжджала» знизу при наведенні миші, використовуємо властивість transform і скажемо елементу пересунутися по осі Y:
поведінка 2
Другий заголовок повинен «виїжджати» зверху вниз, для чого ми використовуємо позитивне значення для функції translateY:
поведінка 3
По правді сказати, даний приклад є найбільш легким: коли курсор знаходиться на зображенні, opacity приймає значення 1. таким чином роблячи підпис видимої:
поведінка 4
Як говорилося вище, четвертий заголовок буде ковзати з одного боку в іншу. Отже, нам необхідно зрушити не тільки сам текст, а й картинку.
При наведенні курсора елемент буде рухатися до тих пір, поки не здасться на 100%. Зауважте, що для прокрутки по горизонталі ми використовуємо функцію translateX:
поведінка 5
Коли курсор наведений, контейнер div разом з картинкою і заголовком буде прокручуватися проти годинникової стрілки - -180deg. приховуючи зображення і відкриваючи підпис:
поведінка 6
У цьому прикладі міститься кілька ефектів відразу. Коли курсор розташований на зображенні, вона збільшується - за це відповідає значення scale (1.3):
Ви можете завантажити архів з файлами, щоб попрацювати з цим кодом самостійно. Ми сподіваємося, що даний урок стане в нагоді вам. Бажаємо вдалих експериментів і творчих успіхів!