Черно-белый
Класс шейпа: coloron

<style>.coloron { filter: grayscale(100%); transition: .3s ease;
}.coloron:hover { filter: none;
}</style>
Черно-белый
Класс шейпа: coloroff

<style>
.coloroff {
transition: .3s ease;
}

.coloroff:hover {
filter: grayscale(100%);
}
</style>
Блюр
Класс шейпа: bluroff

<style>
.bluroff {
filter: blur(1.5px);
transition: .4s ease;
}

.bluroff:hover {
filter: blur(0px);
}
</style>
Увеличение
Класс шейпа: zoomon

<style>
.t396__elem.zoomon {
overflow: hidden;
}

.zoomon .tn-atom {
transition: all 0.6s ease;
}

.zoomon .tn-atom:hover {
transform: scale(1.1);
}
</style>
Увеличение и блюр
Класс шейпа: zoomblur
Hello
Hello

<style>
.t396__elem.zoomblur {
 overflow: hidden;
}

.zoomblur .tn-atom {
 filter: none;
 transition: 0.5s ease;
}

.zoomblur .tn-atom:hover {
 transform: scale(1.1);
 filter: blur(5px);
transition: .5s ease;
}
</style>
Вращение
Класс шейпа: beauty-rotate

<style>
.t396__elem.beauty-rotate {
overflow: hidden;
}

.beauty-rotate {
transition: all 0.6s ease;
}

.beauty-rotate:hover {
border-radius: 100%;
transform: rotate(360deg);
}
</style>
Осветление
Класс шейпа: bright

<style>
.t396__elem.bright {
 overflow: hidden;
}

.bright .tn-atom {
filter: brightness(40%);
 transition: 0.5s ease;
}

.bright .tn-atom:hover {
 transform: scale(1.1);
 filter: brightness(90%);
transition: .5s ease;
}
</style>
Затемнение
Класс шейпа: brighton

<style>.brighton { filter: brightness(100%); transition: .3s ease;
}.brighton:hover { filter: brightness(60%); transition: .3s ease;
}</style>
Вращение, увеличение, цвет
Класс шейпа: zoomrotateonprim

<style>
.t396__elem.zoomrotateonprim {
 overflow: hidden;
}

.zoomrotateonprim .tn-atom {
 filter: grayscale(100%);
 transition: 0.5s ease;
}

.zoomrotateonprim .tn-atom:hover {
 transform: scale(1.6) rotate(-20deg);
 filter: none;
}
</style>
Наклон и сепия
Класс шейпа: small-rotate

<style>
.small-rotate {
transition: .3s ease;
}

.small-rotate:hover {
filter: sepia(50%);
transform: rotate(2deg)
}
</style>
Made on
Tilda