Hello guys in this tutorial we will create a shrink text on hover using HTML & CSS.
Shrink Text: Text can be Shrinked or condensed using some HTML and CSS properties, you’ll be able to use this animation in your websites as headings or sub-headings, the below sections will guide you on the way to create the desired effect.
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Shrink Text Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="animated_text_outer">
<div class="animated_text">
<a href="#">
<span>S</span><span>tack</span>
<span>f</span><span>ind</span>
<span>o</span><span>ver</span>
</a>
</div>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
In this code first we design the div element using basic CSS properties then to make the shrink effect we use the nth-child() Selector and set the letter spacing to -1em after we hover over the text.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.animated_text a{
display: flex;
font-size: 80px;
color: #4b00ff;
text-decoration: unset;
}
span:nth-child(even) {
overflow: hidden;
letter-spacing: -1em;
transition: letter-spacing 0.5s linear;
}
.animated_text a:hover span:nth-child(even) {
letter-spacing: 0;
}