Как сделать подпись для фотографии с помощью CSS3
Karina | 01.09.2014
Веб-разработчики уже не раз убедились в том, насколько широкими являются возможности CSS3 – каскадных таблиц стилей третьего поколения, ведь с их помощью сегодня можно реализовать вещи, для которых не так давно требовалось обязательно знать JavaScript.
style.css
и изображения. Вот что мы будем делать:HTML
Итак, у нас будет шесть различных примеров подписей к изображениям. HTML-часть нашего проекта выглядит так (разверните, чтобы увидеть):
<div id="mainwrapper"> <!-- Example 1 --> <div id="box-1" class="box"> <img id="image-1" src="images/siberian-cat.jpg"/> <span class="caption simple-caption"> <h3>Siberian Cat</h3> </span> </div> <!-- Example 2 --> <div id="box-2" class="box"> <img id="image-2" src="images/birman-cat.jpg"/> <span class="caption full-caption"> <h3>Birman Cat</h3> <p>The Birman has point which means its face, ears, legs, tail and feet are a different color from the rest of its body.</p> </span> </div> <!-- Example 3 --> <div id="box-3" class="box"> <img id="image-3" src="images/maine-coon.jpg"/> <span class="caption fade-caption"> <h3>Maine Coon</h3> <p>Maine Coons are a very large cat and it is not unusual for a male to weigh more than 9 kilos.</p> </span> </div> <!-- Example 4 --> <div id="box-4" class="box"> <img id="image-4" src="images/ragdoll-cat.jpg"/> <span class="caption slide-caption"> <h3>Ragdoll Cat</h3> <p>Ragdolls are long cats. They like to flop down and roll over on their backs.</p> </span> </div> <!-- Example 5 --> <div id="box-5" class="box"> <div class="rotate"> <img id="image-5" src="images/british-shorthair-cat.jpg"/> <span class="caption rotate-caption"> <h3>British Shorthair Cat</h3> <p>They are not vocal cats and in fact are very quiet and can cope with being alone without fretting.</p> </span> </div> </div> <!-- Example 6 --> <div id="box-6" class="box"> <img id="image-6" src="images/the-bengal-cat.jpg"/> <span class="caption scale-caption"> <h3>The Bengal Cat</h3> <p>The Bengal's activity level is very high and they love to play, run and leap.</p> </span> </div> </div>
Все стили мы сохраним в отдельном документе style.css
, чтобы не нагружать HTML-страницу. Не забудьте включить на него ссылку внутри тега <head>
:
<link href="style.css" rel="stylesheet" media="screen" type="text/css" />
Приступим к созданию стиля CSS:
#mainwrapper { font-family: 'Lobster', cursive; height: auto; margin: 100px auto 0 auto; text-align: center; width: 660px; }
Добавим несколько общих характеристик для наших box-ов, а также float: left
для выравнивания элемента по левому краю, чтобы остальные боксы следовали друг за другом. Не стоит забывать и о свойстве overflow
со значением hidden
– благодаря этому всё то, что находится за пределами бокса, будет спрятано.
Также устанавливаем свойство transition
для всех картинок:
#mainwrapper .box { cursor: pointer; height: 200px; float: left; margin: 5px; position: relative; overflow: hidden; width: 200px; } #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
. Вместо того, чтобы использовать параметр opacity
, мы лучше вспомним о цветовой модели RGBA, где для альфа-канала, отвечающего за прозрачность цвета, зададим значение 0.7
, чтобы сделать фон для подписи слегка прозрачным, не затрагивая при этом текст:
#mainwrapper .box .caption { background-color: rgba(0,0,0,0.7); 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
Наш первый пример, пожалуй, один из самых простых – подпись к фото появляется снизу вверх при наведении курсора мыши. Для нее мы установим фиксированную высоту в 40px
и нижнее положение элемента в -40px
, чтобы оно было скрыто под изображением, когда курсор не наведен:
/** Example 1 **/ #mainwrapper .box .simple-caption { height: 40px; width: 200px; display: block; bottom: -40px; line-height: 0pt; text-align: center; }
Пример 2
Во втором варианте подпись совпадает по ширине и высоте с изображением – 200×200 px, и «выезжает» сверху вниз:
/** Example 2 **/ #mainwrapper .box .full-caption { width: 170px; height: 170px; top: -200px; text-align: left; padding: 15px; }
Пример 3
В этом примере мы рассмотрим эффект плавного затухания. Для исходного состояния устанавливаем нулевое значение прозрачности opacity
:
/** Example 3 **/ #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption { opacity: 0; width: 170px; height: 170px; text-align: left; padding: 15px; }
Пример 4
Четвертый заголовок будет «выезжать» с одной стороны в другую:
/** Example 4 **/ #mainwrapper .box .slide-caption { width: 170px; height: 170px; text-align: left; padding: 15px; left: 200px; }
Пример 5
Здесь мы применим эффект вращения, при этом проворачиваться будет не только подпись, но и сама картинка. Для этого нам нужно добавить свойство transform
, установив значение поворота на -180deg
:
/** Example 5 **/ #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; }
Пример 6
В последнем случае мы используем так называемый эффект масштабирования. И если в предыдущих вариантах текст появлялся одновременно с фоном, то сейчас он будет отображаться с задержкой и частями – сначала заголовок h3
, а следом текст p
:
/** Example 6 **/ #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; }
Часть вторая: оживление
В этом разделе урока мы определим поведение каждого из элементов при наведении курсора на соответствующее изображение.
Поведение 1
Для того, чтобы в первом примере подпись «выезжала» снизу при наведении мыши, используем свойство transform
и скажем элементу передвинуться по оси Y:
#mainwrapper .box:hover .simple-caption { -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); opacity: 1; transform: translateY(-100%); }
Поведение 2
Второй заголовок должен «выезжать» сверху вниз, для чего мы используем положительное значение для функции translateY
:
#mainwrapper .box:hover .full-caption { -moz-transform: translateY(100%); -o-transform: translateY(100%); -webkit-transform: translateY(100%); opacity: 1; transform: translateY(100%); }
Поведение 3
По правде сказать, данный пример является наиболее легким: когда курсор находится на изображении, opacity
принимает значение 1
, таким образом делая подпись видимой:
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption { opacity: 1; }
Поведение 4
Как говорилось выше, четвертый заголовок будет скользить с одной стороны в другую. Следовательно, нам необходимо сдвинуть не только сам текст, но и картинку.
При наведении курсора элемент будет двигаться до тех пор, пока не покажется на 100%. Заметьте, что для прокрутки по горизонтали мы используем функцию translateX
:
#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%); } #mainwrapper .box:hover img#image-4 { -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; }
Поведение 5
Когда курсор наведен, контейнер div
вместе с картинкой и заголовком будет прокручиваться против часовой стрелки — -180deg
, скрывая изображение и открывая подпись:
#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
В этом примере содержится несколько эффектов сразу. Когда курсор расположен на картинке, она увеличивается — за это отвечает значение scale(1.3)
:
#mainwrapper .box:hover #image-6 { -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } #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); }
Вы можете скачать архив с файлами, чтобы поработать с этим кодом самостоятельно. Мы надеемся, что данный урок пригодится вам. Желаем удачных экспериментов и творческих успехов!
Оставить комментарий