Зачастую создавая галерею миниатюр нам необходимо присвоить некоторые заголовки, для отображения дополнительной информации. Это весьма умный подход к организации контента на сайте, ведь посетитель получает информацию о содержании материала. В основном такие подписи весьма скучны и однообразны, по этому они не очень привлекают внимание читателя. В сегодняшнем уроке мы рассмотрим как создать анимационные подписи к изображениям с различными эффектами. В примере мы рассмотрим несколько различных вариантов отображения.

Все подписи функционируют при помощи правил CSS3, по этому работать будет только в последних версиях браузеров. И так, приступим.

Шаг 1. HTML

Для начала рассмотрим общую разметку, в которой будут содержаться подписи.

Как вы заметили, ничего сложного в разметке нет, перейдем к следующему шагу.

Общие стили CSS

Чтобы достигнуть одинакового отображения во всех браузерах мы установим сброс стилей.

Теперь определим стили для общего контейнера.

Блоки будут выводиться один к одному со смещением влево. Обратите внимание на свойство overflow: hidden. Таким образом скрываются все элементы.

Теперь рассмотрим стили для подписей, подписи также имеют общие стили и свойство transition.

С общими стилями закончено.

Подпись №1

В первом примере ничего особенного, текст просто будет подниматься снизу. Подпись имеет фиксированную высоту и мы располагаем ее в позиции -30px по вертикали, чтобы скрыть.

Для того, чтобы реализовать эффект нужно использовать свойство transform для перемещения подписи на 100% ее высоту вверх.

Подпись №2

Для второго типа подписи нам необходимо установить ширину и высоту с равными параметрам блока изображения (200x200px), данный эффект появления заключается в выскальзывании подписи сверху вниз при наведении курсора мыши на изображение.

Для второго примера необходимо опустить текст на 100% высоты.

Подпись №3

Третий эффект будет плавно появляться, поэтому изначально подпись будет иметь свойство opacity: 0.

 Для анимации все просто, для этого изменяем значение свойства opacity на 1.

Подпись №4

 В данном примере изображение будет перемещаться влево, поэтому изначально она имеет положение 200px влево  (left:200px).

 Теперь код который будет сдвигать текст.

Также сдвигаем и изображение:

Подпись №5

Пример с вращением, для этого добавляем трансформацию вращения на -180 градусов.

Весь элемент будет поворачиваться на 180 градусов, скрывая изображение и выводя подпись.

Подпись №6

Создаем трансформацию масштабирования. Но текст будет появляться с небольшой задержкой.

При наведении курсора мыши на блок изображение увеличивается до 140% от начального размера.

Затем текст подписи будет выскальзывать слева.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.