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

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

32

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

CSS-эффекты наведения изображения для Weebly

Есть 11 различных эффектов для управления – уменьшение, увеличение, увеличение, сжатие, насыщение, контраст, яркость, оттенки серого, размытие, инвертирование цветов и непрозрачность. Полный код CSS и HTML вместе с демонстрацией для каждого стиля показан ниже.

  • Убедитесь, что вы заменили Image-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, и мы использовали блок «Custom HTML» в WordPress для демонстрации всех эффектов наложения изображений CSS.

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

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