Техническая — ФИШКИ — Digital

плавно появляющийся элемент

				
					selector{
    --speed: 2s;
    animation: none !important;
}
selector > *{
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: all var(--speed) ease-in-out;
}
selector.animated > *{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

Перевод картинки в белый цвет

				
					selector img{
    filter: brightness(0) invert();
}

Перевод картинки в черный цвет

				
					selector img{
    filter: brightness(0) invert(0);
}

Мутный фон

				
					selector .blur{
    transition: .4s;
    backdrop-filter: blur(10px);
}

Увеличение объектов карусели

				
					selector .swiper-slide{
    transform: scale(.95);
    transition: .4s;
}
selector .swiper-slide:hover{
    transform: scale(1);
    transition: .4s;
}

Изменение цвета иконки и заголовка при наведении на контейнер + увеличение и прокрутка иконки

				
					selector .e-con-inner:hover .elementor-icon{
    background: red !important;
    color: #fff !important;
    transition: .4s;
}
selector .e-con-inner .elementor-icon{
    transition: .4s;
}


selector .e-con-inner:hover .elementor-heading-title{
    color: red !important;
    transition: .4s;
}
selector .e-con-inner .elementor-heading-title{
    transition: .4s;
}

Изменение размера и цветности изображения при наведении на контейнер

				
					selector .e-con-inner:hover img{
    transform: scale(1);
    transition: .4s;
    filter: brightness(1) invert(0);
}
selector .e-con-inner img{
    transition: .4s;
    transform: scale(.7);
    filter: brightness(0) invert(0);
}

Появление текстового блока и кнопки при наведении на секцию

Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в страшное насекомое.

				
					selector .e-con-inner p{
    transform: translateY(100px);
    opacity: 0;
    transition: .9s;
}

selector .e-con-inner:hover p{
    transform: translateY(0);
    opacity: 1;
    transition: .4s;
}


selector .e-con-inner .elementor-button{
    transition: .9s;
    transform: scale(.0);
}

selector .e-con-inner:hover .elementor-button{
    transform: scale(1);
    transition: .9s;

}

Уголки вокруг текста

				
					.abc {
  border: 1px solid #000;
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding: 20px;
}

.abc::after,
.abc::before {
  content: "";
  display: block;
  border: 5px solid #fff;
  z-index: 20;
  position: absolute;
}

.abc::after {
  left: -5px;
  top: 50px;
  right: -5px;
  bottom: 50px;
  border-top: none;
  border-bottom: none;
}

.abc::before {
  left: 50px;
  top: -5px;
  right: 50px;
  bottom: -5px;
  border-left: none;
  border-right: none;
}

Увеличение объектов галереи

				
					selector .e-gallery-item{
    transform: scale(.95);
    transition: .4s;
}
selector .e-gallery-item:hover{
    transform: scale(1.2);
    transition: .4s;

}

Увеличение объектов галереи

				
					selector .e-gallery-item{
    opacity: .8;
    filter: invert() brightness(1.14) grayscale(.7);
    transition: .4s !important;
}
selector .e-gallery-item:hover{
    opacity: 1;
     filter: invert(0);
    transition: .4s !important;
}

Передвигаем согласие ниже кнопки

				
					selector .elementor-field-type-acceptance{
    order: 99;
}

Введите текст заголовка

				
					
selector .blockk .arr-link{
    transform: translateY(100px);
    opacity: 0;
    transition: .9s;
}
selector .blockk:hover .arr-link{
    transform: translateY(0);
    opacity: 1;
    transition: .4s;
}
selector .blockk .part-logo img{
    filter: grayscale(1);
    opacity: .9;
    transition: .4s;
}
selector .blockk:hover .part-logo img{
    filter: grayscale(0);
    opacity: 1;
    transition: .4s;
}
selector .blockk{
    transition: .4s;
}
selector .blockk:hover{
    transform: translateY(-3px);
    transition: .4s;
}
selector  h2{
    opacity: .5;
}
selector :hover h2{
    opacity: 1;
    color:  red !important;
}