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 различных стилей переходов.
- Образ
- Заголовок или заголовок
- Описание
- Кнопка
Ниже приведен полный 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», чтобы продемонстрировать демонстрацию.