TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

3

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

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

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

Виджеты будут выглядеть, как показано ниже.

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

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

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

Заголовок в стиле горизонтального разделения.

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

Заголовок в стиле вертикального разделения

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

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

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

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

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

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

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

<div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div>

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

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

Примечание. Размер изображения 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="imagecaption.css"> </head> <body> <div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div> <div class="common split-horiz"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.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://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.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://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slideup"> <div class="pic-caption">Image Slide Up Caption</div> </div> </body> </html>

Источник записи: webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее