Как создать эффекты подписи к изображениям CSS?

Когда вы загружаете изображение на сервер, оно имеет такие свойства, как URL-адрес, заголовок, заголовок, замещающий текст и описание. Однако вы можете увидеть только изображение и подпись на опубликованном веб-сайте. Как правило, веб-мастера сосредотачиваются на демонстрации изображения и забывают о важности подписи. В этой статье мы покажем вам, как создать эффекты подписи к изображениям CSS, чтобы продемонстрировать подписи к изображениям в привлекательной форме.

Изучите WordPress: Просмотрите более 300 бесплатных руководств по WordPress.

Эффект подписи к изображениям CSS

Виджеты будут выглядеть, как показано ниже, и вы также можете проверить то же самое на нашей демонстрационной странице.

Подпись к изображению — стиль скольжения вниз

Сдвиньте подпись вниз. Ссылка возможна.

Подпись к изображению — стиль горизонтального разделения

Подпись к изображению разделена по горизонтали
Заголовок в стиле горизонтального разделения.

Подпись к изображению — стиль вертикального разделения

Подпись к изображению Разделить по вертикали
Заголовок в стиле вертикального разделения

Подпись к изображению — стиль скольжения вверх

Подпись к изображению Slideup
Подпись к изображению

4 разных стиля

Как вы можете видеть в демонстрации, есть четыре различных эффекта, которые вы можете создать для подписи к изображению.

  • Скользить вниз
  • Горизонтальный разрез
  • Вертикальный разрез
  • Скользить вверх

HTML для эффектов подписи к изображениям

Давайте сначала объясним HTML-часть с эффектом скольжения вниз, чтобы было легко понять CSS-часть. Ниже приведен HTML-код для эффекта скольжения вниз.

<div class="common slidedown">
<img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Slidedown">
<div class="pic-caption">Slide down caption. <a href="https://www.webnots.com/how-to-create-css-image-caption-effects/#">Link</a> possible.</div>
</div>

Он имеет следующие классы CSS:

  • общий — это общий набор стилей, применимый ко всем четырем эффектам.
  • скользить вниз — это набор стилей для создания эффекта скольжения вниз. Для других трех эффектов мы использовали классы CSS split-Horiz, split-vert и slideup. Вы можете просто заменить этот класс, чтобы получить другой эффект.
  • картинка-подпись — этот класс определяет эффект, связанный с подписью изображения.

Заметка: Размер изображения 300 × 300 пикселей используется, поэтому на мобильных устройствах не требуется дополнительных настроек.

CSS для эффектов подписи к изображениям

В приведенном выше HTML-коде мы использовали файл «imagecaption.css» для импорта всего необходимого CSS из внешнего файла. Ниже приведен CSS для эффекта скольжения вниз, и вы можете загрузить полные файлы CSS и HTML, нажав кнопку ниже.

/* General Style */
.common{
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
}

.common::before, .common::after{
content: '';
width: 100%;
height: 100%;
background: black;
position: absolute;
opacity: 0.3;
top: 0;
left 0;
-moz-transform: translate3d(0, -100%, 0);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}

.pic-caption {
position: absolute;
text-align: center;
background: lightyellow;
z-index: 999;
width: 100%;
max-height: 100%;
overflow: hidden;
top: 50%;
-webkit-transform: translate3d(-100%, -50%, 0);
transform: translate3d(-100%, -50%, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
line-height: 30px;
font-size: 16px;
}

.pic-caption a{
text-decoration: none;
}

img {
display: block;
}

/* Slidedown Caption */
.slidedown:hover::before{
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slidedown:hover .pic-caption{
opacity: 1;
-moz-transform: translate3d(0, -50%, 0);
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
  • В разделе общего стиля мы создали встроенные блоки для отображения каждого блока изображения.
  • Псевдоэлементы (:: before и :: after) используются для создания эффекта слайдера на изображении.
  • Вы можете видеть заголовок только при наведении курсора и невидимый при загрузке страницы.
  • Класс «pic-caption» назначает светло-желтый цвет подписи и загружает подпись на 50% от верхнего края изображения.
  • CSS-переход и преобразование помогают перемещать подпись слева направо от изображения.
  • Раздел под заголовком «Сдвинуть вниз» помогает показать ползунок, а затем заголовок с использованием свойств преобразования и перехода CSS.

Использование на вашей веб-странице

Загрузите zip-файл «Image Caption Effects.zip», содержащий полные коды HTML и CSS для всех четырех стилей эффектов подписи к изображениям.

В zip-архиве есть два файла «imagecaption.css» и «Imagecaption.html».

  • Загрузите файл CSS в ту же папку вашего HTML или предоставьте полную ссылку на файл CSS в HTML-коде.
  • Вы также можете вставить CSS в заголовок HTML с помощью тегов

    .

  • Вставьте HTML-код между тегами тела вашей веб-страницы.
  • Вы можете использовать только раздел HTML div, относящийся к конкретному эффекту.

Полный HTML-код для всех четырех стилей должен выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
<title>CSS Image Caption Effects</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.webnots.com/how-to-create-css-image-caption-effects/imagecaption.css">
</head>
<body>
<div class="common slidedown">
<img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Slidedown">
<div class="pic-caption">Slide down caption. <a href="https://www.webnots.com/how-to-create-css-image-caption-effects/#">Link</a> possible.</div>
</div>
<div class="common split-horiz">
<img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Split Horizontal">
<div class="pic-caption">Horizontl Split Style Caption.</div>
</div>
<div class="common split-vert">
<img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Split Vertical">
<div class="pic-caption">Vertical Split Style Caption</div>
</div>
<div class="common slideup">
<img src="https://img.webnots.com/2016/01/sample-image.jpg" width="300" height="300" alt="Image Caption Slideup">
<div class="pic-caption">Image Slide Up Caption</div>
</div>
</body>
</html>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *