• Главная»
  • Уроки»
  • CSS»
  • Подписи к изображениям с визуальными эффектами на CSS3

Подписи к изображениям с визуальными эффектами на CSS3

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

demosourse

 

Поддержка в браузерах

Данные эффекты основаны на трансформациях и переходах. Полноценное функционирование обеспечивается в следующих браузерах:

  • Internet Explorer 10+ (еще не выпущен)
  • Firefox 6+
  • Chrome 13+
  • Safari 3.2+
  • Opera 11+

 

Разметка HTML

У нас будет 6 изображений с разными по стилю подписями:

	<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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
				sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
			sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
			sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
			sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
			sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		</span>
		</div>
	</div>

 

Общие стили CSS

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

Стили располагаются в отдельном файле, поэтому их нужно подключить к нашей странице HTML.

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Начнем с определения стилей для тега html и основного контейнера:

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. Таким образом скрываются все элементы, вложенные в блок и выступающие за его границы.

Также определяем свойство transition - оно понадобиться нам позже.

#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. Вместо использования свойство opacity мы применим режим цвета RGBA со значением 0.8 для альфа канала, чтобы сделать фон подписи немного прозрачным без влияния на текст.

#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 по вертикали, чтобы скрыть.

#mainwrapper .box .simple-caption {
    height: 30px;
    width: 200px;
    display: block;
    bottom: -30px;
    line-height: 25pt;
    text-align: center;
}

 

Подпись 2

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

#mainwrapper .box .full-caption {
    width: 170px;
    height: 170px;
    top: -200px;
    text-align: left;
    padding: 15px;
}

 

Подпись 3

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

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
    opacity: 0;
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
}

 

Подпись 4

Четвертая подпись будет выскальзывать слева направо сдвигая изображение. Поэтому изначально она имеет положение 200px влево  (left:200px).

** Caption 4: Slide **/
#mainwrapper .box .slide-caption {
    width: 170px;
    height: 170px;
    text-align: left;
    padding: 15px;
    left: 200px;
}

 

Подпись 5

Пятая подпись будет использовать эффект вращения. Вращается не только текст, но и все изображение

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

#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

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

#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 для перемещения подписи на 100% ее высоту вверх.

#mainwrapper .box:hover .simple-caption {
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

 

Подпись 2. Опускаем текст

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

#mainwrapper .box:hover .full-caption {
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}  

 

Подпись 3. Проявление

Третья подпись имеет самый простой код реализации эффекта. Просто изменяем значение свойства opacity на 1.

#mainwrapper .box:hover .fade-caption {
    opacity: 1;
}

 

Подпись 4. Сдвигаем влево

Как уже упоминалось ранее, и подпись и изображение сдвигаются влево при наведении курсора. Поэтому здесь нужно использовать 2 определения CSS.

Код CSS будет сдвигать подпись влево при наведении курсора мыши на блок.

#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%);
}

 

Подпись 5. Вращаем

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

#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. Масштабирование

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

#mainwrapper .box:hover #image-6 {
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}

А текст подписи будет выскальзывать слева:

#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);
}  

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hongkiat.com/blog/css3-image-captions/
Перевел: Сергей Фастунов
Урок создан: 16 Октября 2012
Просмотров: 40866
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 23 Октября 2012 08:51
    bossboss1
    Ура!!! Я впервые первый комментирую! :)) А вообще классный урок. Побольше таких уроков. А то в последние месяцы меньше стало.
  • 5 Декабря 2012 18:53
    ykpon4uk1989
    Добрый вечер! Данный урок очень помог выполнить задумку, мне понравился. Но хотелось бы, чтобы высота была не фиксированная, уже голову сломал как бы так сделать :) У меня сайт обоев, и везде высота разная, поэтому получается небольшой косяк) 123 136 165px) выбираю максимальные, 165, а при 123 и 136px остается пустота. Помогите чем сможете) И все равно спасибо)
^ Наверх ^