Customizr – custom menu (link hover effects)

Hello!

I would like to know if it’s possible to add this kind of link hover effects (https://tympanus.net/Development/CreativeLinkEffects/) to my Customizr theme – I’m aiming for the 1st or the 5th one.

I’m going nuts already, trying to get at least something similar, but nothing. It’s always 50-50, either absolutely nothing happens or it goes insane.

Anyways, I was thinking – if I just copy the whole css part of that link effect:

.cl-effect-5 a {
overflow: hidden;
padding: 0 4px;
height: 1em;
}

.cl-effect-5 a span {
position: relative;
display: inline-block;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}

.cl-effect-5 a span::before {
position: absolute;
top: 100%;
content: attr(data-hover);
font-weight: 700;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

.cl-effect-5 a:hover span,
.cl-effect-5 a:focus span {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);

in my custom CSS part, how do I connect the menu links to it? Will that even work?

Any kind of suggestion is appreciated,
thank you.

B