Как создать подписи для изображений на CSS3
Зачастую создавая галерею миниатюр нам необходимо присвоить некоторые заголовки, для отображения дополнительной информации. Это весьма умный подход к организации контента на сайте, ведь посетитель получает информацию о содержании материала. В основном такие подписи весьма скучны и однообразны, по этому они не очень привлекают внимание читателя. В сегодняшнем уроке мы рассмотрим как создать анимационные подписи к изображениям с различными эффектами. В примере мы рассмотрим несколько различных вариантов отображения.
Все подписи функционируют при помощи правил CSS3, по этому работать будет только в последних версиях браузеров. И так, приступим.
Шаг 1. HTML
Для начала рассмотрим общую разметку, в которой будут содержаться подписи.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<div id="mainwrapper"> <!-- Подпись 1 --> <div id="box-1" class="box"> <img id="image-1" src="images/1.jpg"/> <span class="caption simple-caption"> <p>Заголовок картинки</p> </span> </div> <!-- Подпись 2 --> <div id="box-2" class="box"> <img id="image-2" src="images/2.jpg"/> <span class="caption full-caption"> <h3>Заголовок картинки</h3> <p>Небольшое описание изображения которое необходимо для демонстрации.</p> </span> </div> <!-- Подпись 3 --> <div id="box-3" class="box"> <img id="image-3" src="images/3.jpg"/> <span class="caption fade-caption"> <h3>Заголовок картинки</h3> <p>Небольшое описание изображения которое необходимо для демонстрации.</p> </span> </div> <!-- Подпись 4 --> <div id="box-4" class="box"> <img id="image-4" src="images/4.jpg"/> <span class="caption slide-caption"> <h3>Заголовок картинки</h3> <p>Небольшое описание изображения которое необходимо для демонстрации.</p> </span> </div> <!-- Подпись 5 --> <div id="box-5" class="box"> <div class="rotate"> <img id="image-5" src="images/5.jpg"/> <span class="caption rotate-caption"> <h3>Заголовок картинки</h3> <p>Небольшое описание изображения которое необходимо для демонстрации.</p> </span> </div> </div> <!-- Подпись 6 --> <div id="box-6" class="box"> <img id="image-6" src="images/6.jpg"/> <span class="caption scale-caption"> <h3>Заголовок картинки</h3> <p>Небольшое описание изображения которое необходимо для демонстрации.</p> </span> </div> |
Как вы заметили, ничего сложного в разметке нет, перейдем к следующему шагу.
Общие стили CSS
Чтобы достигнуть одинакового отображения во всех браузерах мы установим сброс стилей.
1 |
<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> |
Теперь определим стили для общего контейнера.
1 2 3 4 5 6 7 8 9 |
html { background-color: #eaeaea; } #mainwrapper { font: 10pt normal Arial, sans-serif; height: auto; margin: 80px auto 0 auto; text-align: center; width: 660px; } |
Блоки будут выводиться один к одному со смещением влево. Обратите внимание на свойство overflow: hidden. Таким образом скрываются все элементы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#mainwrapper .box { border: 5px solid #fff; cursor: pointer; height: 182px; float: left; margin: 5px; position: relative; overflow: hidden; width: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc; } #mainwrapper .box img { position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } |
Теперь рассмотрим стили для подписей, подписи также имеют общие стили и свойство transition.
1 2 3 4 5 6 7 8 9 10 11 12 |
#mainwrapper .box .caption { background-color: rgba(0,0,0,0.8); position: absolute; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; left: 0; } |
С общими стилями закончено.
Подпись №1
В первом примере ничего особенного, текст просто будет подниматься снизу. Подпись имеет фиксированную высоту и мы располагаем ее в позиции -30px по вертикали, чтобы скрыть.
1 2 3 4 5 6 7 8 |
#mainwrapper .box .simple-caption { height: 30px; width: 200px; display: block; bottom: -30px; line-height: 25pt; text-align: center; } |
Для того, чтобы реализовать эффект нужно использовать свойство transform для перемещения подписи на 100% ее высоту вверх.
1 2 3 4 5 6 |
#mainwrapper .box:hover .simple-caption { -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } |
Подпись №2
Для второго типа подписи нам необходимо установить ширину и высоту с равными параметрам блока изображения (200x200px), данный эффект появления заключается в выскальзывании подписи сверху вниз при наведении курсора мыши на изображение.
1 2 3 4 5 6 7 |
#mainwrapper .box .full-caption { width: 170px; height: 170px; top: -200px; text-align: left; padding: 15px; } |
Для второго примера необходимо опустить текст на 100% высоты.
1 2 3 4 5 6 |
#mainwrapper .box:hover .full-caption { -moz-transform: translateY(100%); -o-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); } |
Подпись №3
Третий эффект будет плавно появляться, поэтому изначально подпись будет иметь свойство opacity: 0.
1 2 3 4 5 6 7 |
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption { opacity: 0; width: 170px; height: 170px; text-align: left; padding: 15px; } |
Для анимации все просто, для этого изменяем значение свойства opacity на 1.
1 2 3 |
#mainwrapper .box:hover .fade-caption { opacity: 1; } |
Подпись №4
В данном примере изображение будет перемещаться влево, поэтому изначально она имеет положение 200px влево (left:200px).
1 2 3 4 5 6 7 |
#mainwrapper .box .slide-caption { width: 170px; height: 170px; text-align: left; padding: 15px; left: 200px; } |
Теперь код который будет сдвигать текст.
1 2 3 4 5 6 7 8 |
#mainwrapper .box:hover .slide-caption { background-color: rgba(0,0,0,1) !important; -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); opacity: 1; transform: translateX(-100%); } |
Также сдвигаем и изображение:
1 2 3 4 5 6 |
#mainwrapper .box:hover img#image-4 { -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } |
Подпись №5
Пример с вращением, для этого добавляем трансформацию вращения на -180 градусов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#mainwrapper #box-5.box .rotate-caption { width: 170px; height: 170px; text-align: left; padding: 15px; top: 200px; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } #mainwrapper .box .rotate { width: 200px; height: 400px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } |
Весь элемент будет поворачиваться на 180 градусов, скрывая изображение и выводя подпись.
1 2 3 4 5 6 7 |
#mainwrapper .box:hover .rotate { background-color: rgba(0,0,0,1) !important; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } |
Подпись №6
Создаем трансформацию масштабирования. Но текст будет появляться с небольшой задержкой.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p { position: relative; left: -200px; width: 170px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } #mainwrapper .box .scale-caption h3 { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms; } #mainwrapper .box .scale-caption p { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; } |
При наведении курсора мыши на блок изображение увеличивается до 140% от начального размера.
1 2 3 4 5 6 |
#mainwrapper .box:hover #image-6 { -moz-transform: scale(1.4); -o-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); } |
Затем текст подписи будет выскальзывать слева.
1 2 3 4 5 6 7 |
#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p { -moz-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 21.10.2012 в 00:15, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |