Волнообразный эффект для изображения
Необычное оформление картинок на сайте играет важную роль в улучшении пользовательского опыта и привлечения внимания посетителей.
Эффекты фото способны сделать визуальное содержание более привлекательным, уникальным и запоминающимся.
Креативные эффекты могут помочь выделить ключевые элементы на странице, подчеркнуть брендовый стиль, создать атмосферу и настроение.
Кроме того, использование эффектов на изображениях может улучшить загрузку сайта, если фото оптимизированы для уменьшения размера файлов без потери качества.
Творческое оформление картинок помогает сделать сайт более интересным и профессиональным.
Код
<div class="photowave">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<style>
.photowave {
--index: calc(1vw + 1vh);
--transition: cubic-bezier(.1, .7, 0, 1);
margin: 20px 0;
display: flex;
justify-content: center;
gap: 0.4%;
perspective: calc(var(--index) * 50);
width: 100%;
position: relative;
z-index: 10;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)) drop-shadow(0 12px 16px rgba(0,0,0,0.05));
}
.photowave div {
width: 7.5%;
height: 400px;
background-image: url('ваше фото');
background-repeat: no-repeat;
background-size: 1300% auto;
filter: contrast(1) brightness(1) saturate(1);
transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);
will-change: transform, filter, rotateY, width;
}
@media (max-width: 991px) {
.photowave div {
height: 250px;
}
}
@media (max-width:575px) {
.photowave div {
height: 150px;
}
}
.photowave div:nth-child(1) {
background-position: 0 center;
}
.photowave div:nth-child(2) {
background-position: 8.33333% center;
}
.photowave div:nth-child(3) {
background-position: 16.66666% center;
}
.photowave div:nth-child(4) {
background-position: 24.99999% center;
}
.photowave div:nth-child(5) {
background-position: 33.33332% center;
}
.photowave div:nth-child(6) {
background-position: 41.66665% center;
}
.photowave div:nth-child(7) {
background-position: 49.99998% center;
}
.photowave div:nth-child(8) {
background-position: 58.33331% center;
}
.photowave div:nth-child(9) {
background-position: 66.66664% center;
}
.photowave div:nth-child(10) {
background-position: 74.99997% center;
}
.photowave div:nth-child(11) {
background-position: 83.3333% center;
}
.photowave div:nth-child(12) {
background-position: 91.6666% center;
}
.photowave div:nth-child(13) {
background-position: 100% center;
}
.photowave div:before,
.photowave div:after {
content: '';
position: absolute;
height: 100%;
width: 30px;
right: calc(var(--index) * -1);
}
.photowave div:after {
left: calc(var(--index) * -1);
}
.photowave div:hover {
filter: contrast(1.3) brightness(1.3) saturate(1.3);
transform: translateZ(calc(var(--index) * 10));
}
.photowave div:hover + * {
filter: contrast(1.25) brightness(1.25) saturate(1.25);
transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);
z-index: -1;
}
.photowave div:hover + * + * {
filter: contrast(1.2) brightness(1.2) saturate(1.2);
transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg);
z-index: -2;
}
.photowave div:hover + * + * + * {
filter: contrast(1.15) brightness(1.1) saturate(1.1);
transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg);
z-index: -3;
}
.photowave div:hover + * + * + * + * {
filter: contrast(1.1) brightness(1.05) saturate(1.05);
transform: translateZ(calc(var(--index) * .6)) rotateY(15deg);
z-index: -4;
}
.photowave div:has( + :hover) {
filter: contrast(1.25) brightness(1.25) saturate(1.25);
transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg);
}
.photowave div:has( + * + :hover) {
filter: contrast(1.2) brightness(1.2) saturate(1.2);
transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg);
}
.photowave div:has( + * + * + :hover) {
filter: contrast(1.15) brightness(1.1) saturate(1.1);
transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg);
}
.photowave div:has( + * + * + * + :hover) {
filter: contrast(1.1) brightness(1.05) saturate(1.05);
transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg);
}
</style>
Картинка будет на всю страницу. Чтобы изменить размер, в коде поменяйте ширину и высоту - выделила красным и синим цветом.Жирным в коде выделила место, куда нужно вставить своё изображение.
Комментарии со спамом удаляются.