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

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

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

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

  • Убедитесь, что вы заменили Image-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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/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="https://www.webnots.com/11-image-hovering-effects-for-weebly/Image-URL">

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

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

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

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