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

11 Ефекти зависання зображення CSS для Weebly

19

У нашій попередній статті ми побачили, як створювати накладання зображень при наведенні, а в цій статті ми розглянемо, як створити прості ефекти наведення зображення для вашого сайту Weebly. Перехід властивостей CSS, перетворення, фільтрація та непрозорість використовуються для створення ефекту зависання зображень на веб -сайті Weebly. Ви можете скопіювати / вставити повний код віджета всередині елемента "Вставити код" або додати стиль CSS у розділі "Код заголовка" та HTML -код всередині елемента " Код вставки " на сторінці.

Ефекти зависання зображення CSS для Weebly

Існує 11 різних ефектів для керування – зменшення, збільшення, збільшення, зменшення, насичення, контрастність, яскравість, відтінки сірого, розмиття, інвертування кольорів та непрозорість. Повний код CSS та HTML разом із демонстрацією для кожного стилю показаний нижче.

  • Обов’язково замініть URL-адресу зображення на власну URL-адресу зображення. Ви можете завантажити зображення в розділі "Активи" або використати URL -адреси з різних сторінок на своєму веб -сайті Weebly або використати URL -адреси з іншого сайту.
  • Ви можете змінити значення масштабу, відтінків сірого, яскравості, контрастності тощо за допомогою власних значень. Наприклад, "-webkit-filter: яскравість (0,25);" зменшить яскравість до 25%, яку можна змінити на "-webkit-filter: яскравість (1,25);" збільшити яскравість до 125%.
  • Властивість фільтра не підтримується в Internet Explorer.

Ось повний код для кожного типу ефекту зависання зображення. Ви можете переглянути попередній перегляд, навевши мишку на зображення.

1 Збільште зображення під час наведення

<style> .cont1 { overflow:hidden; } .cont1:hover .image1 { -webkit-transform:scale(1); transform:scale(1); } .image1 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont1"> <img class="image1" src="Image-URL"> </div>

2 Зменшіть зображення при наведенні

<style> .cont2 { overflow:hidden; } .cont2:hover .image2 { -webkit-transform:scale(1); transform:scale(1); } .image2 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont2"> <img class="image2" src="Image-URL"> </div>

3 Збільште розмір зображення під час наведення

<style> .image3 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image3:hover { -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <img class="image3" src="Image-URL">

4 Зменшіть розмір зображення під час наведення

<style> .image4 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image4:hover { -webkit-transform:scale(0.7); transform:scale(0.7); } </style> <img class="image4" src="Image-URL">

5 Змініть насиченість кольорів зображення при наведенні курсора

<style> .image5 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image5:hover { -webkit-filter: saturate(4); } </style> <img class="image5" src="Image-URL">

6 Перетворіть зображення у відтінки сірого при наведенні курсора

<style> .image6 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image6:hover { -webkit-filter: grayscale(100%); } </style> <img class="image6" src="Image-URL">

7 Змініть контрастність під час наведення зображення

<style> .image7 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image7:hover { -webkit-filter: contrast(160%); } </style> <img class="image7" src="Image-URL">

8 Змініть яскравість під час наведення зображення

<style> .image8 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image8:hover { -webkit-filter: brightness(0.25); } </style> <img class="image8" src="Image-URL">

9 Змініть розмиття зображення при наведенні

<style> .image9 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image9:hover { -webkit-filter: blur(5px); } </style> <img class="image9" src="Image-URL">

10 Інвертувати кольори зображення при наведенні

<style> .image10 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image10:hover { -webkit-filter: invert(100%); } </style> <img class="image10" src="Image-URL">

11 Змініть кольори непрозорості під час наведення

<style> .image11 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image11:hover { opacity:0.6; filter: alpha(opacity=60); } </style> <img class="image11" src="Image-URL">

Оскільки всі ці ефекти створюються за допомогою загального CSS, ви можете використовувати ці коди на будь -якій HTML -сторінці. Наприклад, це веб -сайт WordPress, і ми використовували блок " Спеціальний HTML " у WordPress, щоб продемонструвати всі ефекти накладання зображень CSS.

Джерело запису: www.webnots.com

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