Главная страница » CSS » Как создать подписи для изображений на CSS3

Как создать подписи для изображений на 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. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.