Open In App

Shrink Text on Hover using HTML and CSS

Improve
Improve
Like Article
Like
Save
Share
Report

Text can be Shrinked or condensed using some HTML and CSS properties, you can use this animation in your websites as headings or sub-headings, the below sections will guide you on how to create the desired effect.

HTML Code: In this section we have simple div  element which contains the text separated with span tags.

html




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Shrink Text</title>
</head>
 
<body>
  <div>
    <span>G</span><span>EEKS</span>
    <span>F</span><span>OR</span>
    <span>G</span><span>EEKS</span>
  </div>     
</body>
</html>


CSS Code: In this code first we design the div  element using basic CSS  properties and then to create the shrink effect we use the nth-child() Selector and set the letter spacing to -1em when we hover over the text.

html




<style>
  *{
    margin: 0;
    padding: 0;
  }
  /* designing the text*/
  div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    font-size: 2.5em;
    color: rgb(4, 110, 4);
  }
  /*creating the shrink animation*/
  span:nth-child(even){
    overflow: hidden;
    letter-spacing: 0;
    transition:  1s;
  }
 
  div:hover span:nth-child(even){
    letter-spacing: -1em;
  }
 </style>


Final Code: It is the combination of the above two code sections.

html




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>Shrink Text</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  /* designing the text*/
  div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    font-size: 2.5em;
    color: rgb(4, 110, 4);
  }
  /*creating the shrink animation*/
  span:nth-child(even){
    overflow: hidden;
    letter-spacing: 0;
    transition:  1s;
  }
 
  div:hover span:nth-child(even){
    letter-spacing: -1em;
  }
 </style>
 
<body>
  <div>
    <span>G</span><span>EEKS</span>
    <span>F</span><span>OR</span>
    <span>G</span><span>EEKS</span>
  </div
</body>
</html>


Output:



Last Updated : 01 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads