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

Як створити ефекти підпису зображень CSS?

1

Коли ви завантажуєте зображення на сервер, воно має такі властивості, як 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:

  • загальний – це загальний набір стилів, придатний для всіх чотирьох ефектів.
  • 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; }
  • У розділі загального стилю ми створили вбудовані блоки для показу кожного блоку зображення.
  • Псевдоелементи (:: до та :: після) використовуються для створення ефекту повзунка на зображенні.
  • Підпис можна побачити лише при наведенні курсора, і він непомітний під час завантаження сторінки.
  • Клас “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
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі