Skip to content
Related Articles

Related Articles

Shrink Text on Hover using HTML and CSS
  • Last Updated : 29 Jul, 2020

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.




<!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 fisr 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.




<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.




<!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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :