Как создать подписи для изображений на 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">

<div id="box-1" class="box">

<img id="image-1" src="images/1.jpg"/>

<span class="caption simple-caption">

<p>Заголовок картинки</p>

</span>

</div>

<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>

<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>

<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>

<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>

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

}

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

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

Читайте также:

css3 transition, Веб-мастеру, Интересно, Разработка сайта

Опубликовал Cooper 21.10.2012 в 00:15, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.

Copyright © 2010-2019 Rudebox Design Team Карта сайта