fbpx

The effect:

The text in the span is what I want to strike out.

The code:

@keyframes strike{
0% { width : 0; }
100% { width: 100%; }
}
.strike {
position: relative;
}
.strike:hover:after{
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: black;
animation-name: strike;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

The effect:

The text in the span is what I want to underline

The code:

.borderCenter {
position: relative;
}

.borderCenter::after {
content: "";
position: absolute;
left: 50%;
bottom: -3px;
width: 60%;
height: 1px;
opacity: 0;
background-color: #5778F3;
transform: translate(-50%, 0);
transition: all 0.3s ease-in-out;
}

.borderCenter:hover::after {
width: 100%;
opacity: 1;
}

The effect:

The text in the span is what I want to highlight

The code:

em {
position: relative;
}

em::after {
content: "";
position: absolute;
z-index: -1;
top: 70%;
left: -0.1px;
right: -0.1px;
bottom: 0;
transition: top .1s ease-in-out;
background-color: rgba(87,120,243,0.5);
}

em:hover::after {
top: 0;
}

The effect:

Make image move on hover

quickstart-icon

The code:

.slideUp {
transition: transform .3s ease-in-out;
}

.slideUp:hover {
transform: translateY(-25px);
}