<!--
Follow me on
Instagram: https://instagram.com/supahfunk
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/
-->
<span class="top">TOP</span>
<span class="right">RIGHT</span>
<span class="bottom">BOTTOM</span>
<span class="left">LEFT</span>
<span class="angle">ANGLE</span>
<span class="radial">RADIAL</span>
/*--------------------
Body
--------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 50px 0;
min-height: 100vh;
margin: 0;
background: radial-gradient(ellipse farthest-corner at center bottom, #6beace, #2e9aa4);
color: #8b9095;
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 80px;
letter-spacing: 0.02em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@media (max-width: 400px) {
font-size: 50px;
}
}
span {
cursor: pointer;
-webkit-text-stroke-color: #fff;
-webkit-text-stroke-width: 0.02em;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-repeat: no-repeat;
transition: background-size .5s cubic-bezier(0.67, 0.01, 0.15, 0.98);
}
.top {
background-image: linear-gradient(180deg, #fff 0%, #fff 50%, transparent 50.1%);
background-position: 100% 0%;
background-size: 100% 0%;
&:hover {
background-size: 100% 200%;
}
}
.right {
background-image: linear-gradient(270deg, #fff 0%, #fff 50%, transparent 50.1%);
background-position: 100% 0%;
background-size: 0% 100%;
&:hover {
background-size: 200% 100%;
}
}
.bottom {
background-image: linear-gradient(0deg, #fff 0%, #fff 50%, transparent 50.1%);
background-position: 100% 100%;
background-size: 100% 0%;
&:hover {
background-size: 100% 200%;
}
}
.left {
background-image: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50.1%);
background-size: 0% 100%;
&:hover {
background-size: 200% 100%;
}
}
.angle {
background-image: linear-gradient(135deg, #fff 0%, #fff 50%, transparent 50.1%);
background-size: 0% 100%;
&:hover {
background-size: 220% 100%;
}
}
.radial {
background-image: radial-gradient(circle farthest-corner at center center, #fff 0%, #fff 50%, transparent 50.1%);
background-position: 50% 50%;
background-size: 0% 0%;
&:hover {
background-size: 180% 400%; // Depends by text size
}
}
View Compiled