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

Добавить эффект наведения изображения перспективы в Weebly

18

Возможно, вы используете много изображений на своем сайте Weebly, но хотите по-разному выделить для пользователей только важные изображения, чтобы привлечь их внимание. Например, вы можете создать страницу-витрину портфолио и отображать изображения вашей работы над проектами, фотографии, видео и т.д. Добавление эффекта наведения в перспективе к таким изображениям портфолио привлекает внимание пользователя и улучшает взаимодействие. В этой статье мы покажем, как добавить эффект зависания перспективы к изображениям на вашем сайте Weebly. Ниже приведен пример изображения с эффектом наведения и наведите указатель мыши на изображение, чтобы увидеть эффект наведения в перспективе.

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

Процесс состоит из трех простых шагов:

  • Загрузка изображения на ваш сайт Weebly
  • Добавление кода CSS
  • Добавление HTML-кода

Шаг 1. Загрузка изображения

Войдите в свою учетную запись Weebly, выберите сайт, который хотите редактировать, и перейдите к «Дизайн> Редактировать HTML / CSS». Нажмите кнопку «+» рядом с «Assets», а затем выберите «Загрузить файл (ы)». Загрузите изображение, для которого хотите добавить эффект наведения. Подробнее о редактировании исходного CSS-кода сайта Weebly.

Добавить эффект наведения изображения перспективы в Weebly

Загрузка файла на сайт Weebly

URL-адрес загруженного изображения должен иметь вид – «http://yoursitename.weebly.com/files/theme/image-name.jpg ». Замените имя сайта и изображения на свое в URL-адресе.

Шаг 2 – Добавление кода CSS для эффекта наведения

Добавьте приведенный ниже код CSS в раздел «Страницы> Выберите страницу> Дополнительные настройки> Код заголовка». Замените URL-адрес изображения собственным URL-адресом изображения из шага 1.

<style type="text/css"> .thumb { width: 400px; height: 300px; margin: 70px auto; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"); background-size: 0, cover; transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;} .thumb a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; background: inherit; background-size: cover, cover; background-position: bottom; transform: rotateX(90deg); transform-origin: bottom; } .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); transform: rotateX(0) translateZ(-60px) scale(0.85); } </style>

Шаг 3 – Добавление HTML

Последний шаг – добавить приведенный ниже код в область содержимого внутри элемента «Вставить код».

<div class="thumb"> <a href="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"> <span>KungFu Panda</span> </a> </div>

Изображение может не отображаться в редакторе Weebly, опубликуйте свой сайт и наведите указатель мыши на изображение, чтобы увидеть, как к изображению добавляется эффект перспективного изображения.

Ищете виджет для обмена изображениями с эффектом наведения перспективы, как показано ниже?

Подробнее…

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

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