Select Page

CSS Text Animation: How to Move Letters of a String on Hover for an Engaging User Experience

by | May 18, 2023

In this post, we explore an exciting combination of JavaScript and CSS to create an eye-catching text animation. By dynamically generating <h3> elements for each letter of a given string, we bring your text to life! The code snippet showcases a mesmerizing transformation and gradient background effect that activates upon hovering over the individual letters. Through the seamless integration of JavaScript’s createElement() function and CSS transitions, your web page will exude elegance and interactivity. Let’s dive on how to create amazing text animation using CSS, JS and HTML.

Create the text animation

    <div id="container">
    var myString = "Coding Beast";

    for (var i = 0; i < myString.length; i++) {
        var letter = myString[i];

        // Create a new div element
        var div = document.createElement("h3");

        // Set the content of the div to the current letter
        div.textContent = letter;

        // Add class

        // Append the div to the container element
        var container = document.getElementById("container");

This is what HTML code creates the script from above.

CSS Text Animation: How to Move Letters of a String on Hover for an Engaging User Experience

    background: black;

#container {
    display: flex;
    align-items: center;
    justify-content: center;

.letter {
    transition: 0.4s;
    transform: translateX(0);
    /* cursor: grab; */
    color: red;

.letter:hover {
    transform: translatey(-1rem);
    background: -webkit-linear-gradient(120deg, hsl(19, 90%, 52%), hsl(65, 100%, 50%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

The main purpose of this code is to dynamically create a series of <h3> elements within a <div> container, with each element representing a letter from the string “Coding Beast” or whatever string you will type.

The JavaScript code uses a for loop to iterate over each character in the myString variable. For each character, it creates a new <h3> element using document.createElement(“h3”). The content of the <h3> element is set to the current letter using the textContent property. It then adds the class “letter” to the <h3> element using the classList.add() method.

The newly created <h3> element is appended to the <div> container element, retrieved using document.getElementById(“container”). This results in a series of <h3> elements being added as children of the <div>.

The CSS styles defined in the provided CSS code are responsible for the visual appearance and effects of the <h3> elements. The background of the <body> is set to black, the <div> container is centered both vertically and horizontally using flexbox, and the .letter class defines transitions, transformations, and hover effects for the <h3> elements.

Overall, the code generates a visually appealing effect where each letter in the string “Coding Beast” appears as a separate <h3> element within a centered container, and hovering over the letters triggers a transformation and gradient background effect.

See more interesting animations here.


Submit a Comment

Your email address will not be published. Required fields are marked *

Looking For Something?

Follow Us

Related Articles

How to Open Links in a New Tab Using HTML and JavaScript

How to Open Links in a New Tab Using HTML and JavaScript

Introduction How to Open Links in a New Tab Using HTML and JavaScript Have you ever clicked on a link and wished it would open in a new tab instead of navigating away from the current page? Well, you're in luck! In this blog post, we'll guide you through the simple...

Namecheap: More Than Just a Domain Registrar

Namecheap: More Than Just a Domain Registrar

Introduction In the vast digital landscape of the internet, one thing is for certain: your online presence begins with a memorable domain name. When it comes to domain registration and hosting services, Namecheap stands out as a top choice for individuals and...

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!