Skip to content
Related Articles
Open in App
Not now

Related Articles

Bottom Half Hidden Text Revealer on Mouse Over in CSS

Improve Article
Save Article
  • Last Updated : 25 Feb, 2021
Improve Article
Save Article

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.


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


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            overflow: hidden;
            background-color: black;
        .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%);
    <div class="upper_text">
        Geeks For Geeks
    <div class="pointer">
        Geeks For Geeks
        document.addEventListener('mousemove', (e) => {
            const pointer = document.querySelector('.pointer');
            `circle(30px at ${e.offsetX}px ${e.offsetY}px)`;


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!