Stylesheet anlagen z. B. hoverFX

CSS eintragen (ist bereits korrigiert: & ersetzt durch Klasse und } hinzugefügt:

/*https://codepen.io/vulchivijay/pen/yyxyvB*/


.underline-from-left {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;}
.underline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #2980b9;
height: 4px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.underline-from-left:hover:before {
right: 0;
}
}
.underline-from-center {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;}
.underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #2980b9;
height: 4px;
-webkit-transition-property: left right;
transition-property: left right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.underline-from-center:hover:before {
left: 0;
right: 0;
}
}
.underline-from-right {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;}
.underline-from-right:before {
content: "";
position: absolute;
z-index: -1;
left: 100%;
right: 0;
bottom: 0;
background: #2980b9;
height: 4px;
-webkit-transition-property: left;
transition-property: left;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.underline-from-right:hover:before {
left: 0;
}
}
.reveal {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;}
.reveal:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-color: #2980b9;
border-width: 0;
border-style: solid;
-webkit-transition-property: border width;
transition-property: border width;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.reveal:hover:before {
border-width: 4px;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.underline-reveal {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;}
.underline-reveal:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
background-color: #2980b9;
height: 4px;
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.underline-reveal:hover:before {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.overline-reveal {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;}
.overline-reveal:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
background-color: #2980b9;
height: 4px;
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.overline-reveal:hover:before {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.overline-from-left {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;}
.overline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
top: 0;
background-color: #2980b9;
height: 4px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.overline-from-left:hover:before {
right: 0;
}
}
.overline-from-center {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden; }
.overline-from-center :before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
top: 0;
background-color: #2980b9;
height: 4px;
-webkit-transition-property: left right;
transition-property: left right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.overline-from-center :hover:before {
left: 0;
right: 0;
}
}
.overline-from-right {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;}
.overline-from-right:before {
content: "";
position: absolute;
z-index: -1;
left: 100%;
right: 0;
top: 0;
background-color: #2980b9;
height: 4px;
-webkit-transition-property: left;
transition-property: left;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.overline-from-right:hover:before {
left: 0;
}
}