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

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

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

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

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

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

Войдите в свою учетную запись Weebly, выберите сайт, который хотите редактировать, и перейдите к «Дизайн> Редактировать HTML / CSS». Нажмите кнопку «+» рядом с «Assets», а затем выберите опцию «Upload File (s)». Загрузите изображение, на которое хотите добавить эффект наведения. Узнайте больше о редактировании исходного CSS сайта 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://img.webnots.com/2015/07/Image-1.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://img.webnots.com/2015/07/Image-1.jpg">
<span>KungFu Panda</span>
</a>
</div>

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

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

Читать больше…

Кунг-фу Панда

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

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

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