<style>.coloron { filter: grayscale(100%); transition: .3s ease;
}.coloron:hover { filter: none;
}</style>

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

.coloroff:hover {
filter: grayscale(100%);
}
</style>

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

.bluroff:hover {
filter: blur(0px);
}
</style>

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

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

.zoomon .tn-atom:hover {
transform: scale(1.1);
}
</style>

<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>

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

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

.beauty-rotate:hover {
border-radius: 100%;
transform: rotate(360deg);
}
</style>

<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>

<style>.brighton { filter: brightness(100%); transition: .3s ease;
}.brighton:hover { filter: brightness(60%); transition: .3s ease;
}</style>

<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>

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

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