HTML, CSS

Как сделать подпись для фотографии с помощью CSS3

Karina | 01.09.2014

Веб-разработчики уже не раз убедились в том, насколько широкими являются возможности CSS3 – каскадных таблиц стилей третьего поколения, ведь с их помощью сегодня можно реализовать вещи, для которых не так давно требовалось обязательно знать JavaScript.

В этом уроке вы увидите, как можно сделать подписи к картинкам с помощью CSS3. На странице предоставлены только некоторые части кода, а для того, чтобы вы могли попрактиковаться, в конце этой статьи дана ссылка для скачивания всех файлов, включая HTML-страницу, файл 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);
}

Вы можете скачать архив с файлами, чтобы поработать с этим кодом самостоятельно. Мы надеемся, что данный урок пригодится вам. Желаем удачных экспериментов и творческих успехов!

Загрузить архив RAR (252 kB)