Shrink Text on Hover using HTML and CSS Last Updated : 05 Aug, 2024 Comments Improve Suggest changes Like Article Like 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: Comment More infoAdvertise with us Next Article Shrink Text on Hover using HTML and CSS L lakshgoel204 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to Add Transition on Hover Using CSS? Transitions are the CSS technique used to create smooth changes between property values over a specified duration. By defining a transition, you can animate properties such as color, size, or position, making changes appear gradual rather than abrupt. For hover effects, transitions can enhance user 2 min read How to Change Image Opacity on Hover using CSS ? Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive 2 min read Responsive Card with hover effect using HTML and CSS Cards are very important part for any website. It is used to display some important information in short to viewers. So, in this article, we will create a  responsive card with amazing hover effect using HTML and CSS. By using HTML we will design the basic structure of the card and then by using the 4 min read How to Change the Color of Link on Hover using CSS ? Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU 2 min read How to Zoom an Image on Mouse Hover using CSS? CSS plays a vital role in styling modern websites, with over 90% of sites using it for visual effects and responsive layouts. One popular effect is image zoom on hover, which enhances user experience and adds visual appeal. In this article, you’ll learn three simple ways to create image zoom effects 2 min read Like