Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Bottom Half Hidden Text Revealer on Mouse Over in CSS

  • Last Updated : 25 Feb, 2021

In this CSS effect, the bottom half of the text is hidden, and when the user hovers on the text, some portion of the text becomes visible. This effect can be created by giving 0 brightness to text to be hidden and using the clip-path property to make it visible. JavaScript is used to get the cursor position.

Approach:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Create an HTML file with the name index.html.
  • Create two div elements, with the class name as upper_text and the other with class name pointer.
  • Add styles to these two classes in CSS.
  • Make sure to give styles to both these div elements with the exact same properties i.e, size and position should be exactly the same so that both of these divs sit on top of each other.
  • Make use of the clip-path property in the upper_text div element to clip the upper half of the text.
  • Add a script tag in the index.html file.
  • Add an event listener to the document to listen for mousemove event.
  • Get the reference to the HTML element having a class name pointer.
  • Get the current position of the cursor and change the styling of the pointer element. Clip a circle of some predefined radius at the current cursor position. So that the text becomes visible for that radius.

HTML code:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
                content="IE=edge">
  
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            overflow: hidden;
            background-color: black;
        }
          
        .upper_text,
        .pointer {
            position: fixed;
            top: 40vh;
            left: 40vw;
            width: 350px;
            color: chartreuse;
            font-size: 50px;
            cursor: all-scroll;
        }
          
        .upper_text {
            clip-path: polygon(0% 0%, 
                100% 0%, 100% 50%, 0% 50%);
        }
    </style>
</head>
  
<body>
    <div class="upper_text">
        Geeks For Geeks
    </div>
  
    <div class="pointer">
        Geeks For Geeks
    </div>
    <script>
        document.addEventListener('mousemove', (e) => {
            const pointer = document.querySelector('.pointer');
              
            pointer.style.clipPath = 
            `circle(30px at ${e.offsetX}px ${e.offsetY}px)`;
        });
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!