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

Есть много свойств CSS для украшения ваших изображений. В другой статье мы объяснили 11 различных эффектов зависания изображения с помощью CSS. Эффект наложения – еще один способ сделать изображения привлекательными на вашем сайте Weebly. В этой статье мы рассмотрим, как создать эффект наложения CSS при наведении курсора для создания скользящей подписи, заголовка, описания и кнопки на изображениях.

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

У нас будет 8 различных стилей для перемещения контента по изображению, как указано ниже. Вы можете просмотреть все виджеты на нашей демонстрационной странице.

Скольжение слева направо
Справа налево
Сверху донизу
Снизу вверх

Скольжение от левого верхнего угла к правому нижнему
От нижнего правого до верхнего левого
С правого верхнего угла в левый нижний
От левого нижнего до правого верхнего

Вы можете прокрутить страницу вниз, чтобы просмотреть живую демонстрацию всех этих 8 стилей.

Как создать наложение изображения в CSS?

Чтобы добавить виджет на свой сайт Weebly, необходимо выполнить три простых шага:

Загрузка изображений или использование внешних ссылок на изображения
Добавление CSS в раздел «Код заголовка»
Добавление CSS с помощью элемента «Вставить код»

Шаг 1. Загрузка изображений

В этом уроке мы использовали изображение с шириной 400 пикселей и высотой 350 пикселей. Вы можете использовать любые размеры и заменить то же самое в CSS, просто заменив все вхождения 400 пикселей и 350 пикселей на высоту и ширину вашего изображения. Загрузите изображения в редактор кода Weebly в разделе «Тема> Изменить HTML / CSS> Активы», и путь к загруженному изображению будет выглядеть следующим образом:

https://yoursite.com/files/theme/image.jpg

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

Шаг 2 – CSS для эффекта наложения изображения при наведении курсора

Виджет состоит из четырех элементов, как показано ниже, и имеет 8 различных стилей переходов.

Эффект наложения Weebly при наведении курсора на изображение

Образ
Заголовок или заголовок
Описание
Кнопка

Ниже приведен полный CSS, который необходимо добавить в раздел «Код заголовка» вашей страницы Weebly.

Изображение помещается внутри панели (.panel) с такими же размерами, как и изображение (400 x 350 пикселей).
Наложенный слайдер (.overlay) создается с помощью перехода CSS вместе с функцией cubic-bezier ().
Наложенный слайдер имеет элементы – заголовок, описание и кнопку (.heading, .desc и .btn).
8 стилей с классами – .left, .right, .top, .bottom, .top-left, .top-right, .bottom-left и .bottom-right.
Каждый стиль имеет эффект зависания с соответствующими классами, например .panel: hover .left, .panel: hover .right и т. Д.

<style>

*{
box-sizing: border-box;
}

/* Image Panel or Container */
.panel{
width: 400px;
height: 350px;
overflow: hidden;
margin: 5px;
border: 1px solid #000;
box-shadow: 0px 0px 15px 0px #666, 0px 5px 15px 0px #000;
margin-bottom: 60px;
}

/* Image Overlay */
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.45);
position: relative;
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
padding: 16px;
color: #fff;
overflow: hidden;
text-shadow: 1px 1px 5px #673AB7;
}

/* Overlay Heading or Title */
.overlay .heading{
font-size: 30px;
font-style: italic;
text-align: center;
color: #ffffff;
padding:20px;
}

/* Overlay Description */
.panel .overlay .desc{
line-height: 30px;
position: relative;
font-size: 16px;
overflow: hidden;
}

/* Overlay Button */
.overlay .btn{
padding: 10px;
margin: 10px;
background: #CCFFCC;
float: right;
border-radius: 3px;
}
.btn a{
color: #333333;
text-decoration: none;
}

/* Overlay Styles - Ensure to use panel class dimensions */
.left{
left: -400px;
}
.right{
right: -400px;
}
.top{
top: -350px;
}
.bottom{
bottom: -350px;
}
.top-left{
top: -350px;
left: -400px;
}
.top-right{
top: -350px;
right: -400px;
}
.bottom-left{
bottom: -350px;
left: -400px;
}
.bottom-right{
bottom: -350px;
right: -400px;
}

/* Overlay Hover Styles */
.panel:hover .left{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
left: 0px;
}
.panel:hover .right{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
right: 0px;
}
.panel:hover .top{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
top: 0px;
}
.panel:hover .bottom{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
bottom: 0px;
}
.panel:hover .top-left{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
top: 0px;
left: 0px;
}
.panel:hover .top-right{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
top: 0px;
right: 0px;
}
.panel:hover .bottom-left{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
bottom: 0px;
left: 0px;
}
.panel:hover .bottom-right{
-webkit-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-moz-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
-o-transition: all 0.4s cubic-bezier(.99,.99,0,.61);
transition: all 0.4s cubic-bezier(.99,.99,0,.61);
bottom: 0px;
right: 0px;
}

</style>

HTML для эффекта наложения изображения при наведении курсора

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

<!-- Overlaying Left to Right -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay left">
<h3 class="heading">Slide Left to Right</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="https://www.webnots.com/css-overlay-effect-on-image-hover-for-weebly-site/#">Read more...</a></div>
</div>
</div>


<!-- Overlaying Right to Left -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay right">
<h3 class="heading">Slide Right to Left</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="https://www.webnots.com/css-overlay-effect-on-image-hover-for-weebly-site/#">Read more...</a></div>
</div>
</div>

<!-- Overlaying Top to Bottom -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay top">
<h3 class="heading">Slide Top to Bottom</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="https://www.webnots.com/css-overlay-effect-on-image-hover-for-weebly-site/#">Read more...</a></div>
</div>
</div>

<!-- Overlaying Bottom to Top -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay bottom">
<h3 class="heading">Slide Bottom to Top</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="https://www.webnots.com/css-overlay-effect-on-image-hover-for-weebly-site/#">Read more...</a></div>
</div>
</div>

<!-- Overlaying Top-Left to Bottom-Right -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay top-left">
<h3 class="heading">Top-Left to Bottom-Right</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="https://www.webnots.com/css-overlay-effect-on-image-hover-for-weebly-site/#">Read more...</a></div>
</div>
</div>

<!-- Overlaying Top-Right to Bottom-Left -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay top-right">
<h3 class="heading">Top-Right to Bottom-Left</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="https://www.webnots.com/css-overlay-effect-on-image-hover-for-weebly-site/#">Read more...</a></div>
</div>
</div>

<!-- Overlaying Bottom-Left to Top-Right -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay bottom-left">
<h3 class="heading">Bottom-Left to Top-Right</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="https://www.webnots.com/css-overlay-effect-on-image-hover-for-weebly-site/#">Read more...</a></div>
</div>
</div>

<!-- Overlaying Bottom-Right to Top-Left -->
<div class="panel" style="background: url('https://img.webnots.com/2016/01/sample-image.jpg');">
<div class="overlay bottom-right">
<h3 class="heading">Bottom-Right to Top-Left</h3>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium quis enim nam dolorem recusandae ducimus laudantium iure sint similique reiciendis quaerat dolorum cum aliquid officiis repudiandae in qui itaque maiores!</p>
<div class="btn"><a href="https://www.webnots.com/css-overlay-effect-on-image-hover-for-weebly-site/#">Read more...</a></div>
</div>
</div>

Указывает на заметку

Если вы хотите использовать эффекты наложения на изображениях по всему сайту, поместите код CSS в раздел «Код заголовка» вашего сайта в разделе «Настройки> SEO> Код заголовка». Или вы можете добавить CSS в файл «main.less» без тегов

.
Теперь блок кода HTML можно разместить на любой из ваших страниц Weebly. Например, вы можете использовать стиль «слева направо» на странице 1 и стиль «снизу вверх» на странице 2.
После внедрения кода изображения в редакторе могут выглядеть зашифрованными, но на опубликованном сайте изображения будут отображаться правильно с эффектом наложения.

Ниже представлена живая демонстрация всех 8 виджетов. Фактически, вы можете использовать эти виджеты на любом веб-сайте, например WordPress. Это сайт WordPress, и мы вставили код, используя блок «Custom HTML», чтобы продемонстрировать демонстрацию.