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

Додайте ефект перспективного наведення зображення у Weebly

1

Можливо, ви використовуєте багато зображень на своєму веб -сайті Weebly, але хотіли виділити користувачам лише важливі зображення різним чином, щоб залучити їх. Наприклад, ви можете створити сторінку портфоліо -вітрини та відображати зображення своєї роботи над проектами, фотографіями, відео тощо. Додавання ефекту наведення курсора до таких зображень портфоліо привертає увагу користувача та покращує взаємодію. У цій статті ми покажемо, як додати ефект зависання перспективи до зображень на вашому веб -сайті Weebly. Нижче наведено приклад зображення з ефектом зависання та наведіть курсор миші на зображення, щоб побачити ефект зависання перспективи.

Як додати ефект перспективного зависання до зображення?

Процес складається з трьох простих кроків:

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

Крок 1 – Завантаження зображення

Увійдіть у свій обліковий запис Weebly, виберіть сайт, який потрібно редагувати, і перейдіть до «Дизайн> Редагувати HTML / CSS». Натисніть кнопку +, доступну поруч із “Активи", а потім виберіть опцію “Завантажити файл (и)”. Завантажте зображення, до якого потрібно додати ефект наведення. Докладніше про редагування вихідного 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, опублікуйте свій сайт і наведіть курсор миші на зображення, щоб побачити ефект перспективного зображення, доданий до зображення.

Шукаєте віджет для обміну зображеннями разом з ефектом наведення, як показано нижче?

Читати далі…

Джерело запису: webnots.com
Залиште відповідь

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