Bottom Half Hidden Text Revealer on Mouse Over in CSS

Bottom Half Hidden Text Revealer on Mouse Over in CSS

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

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:

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

css html javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Custom Dropdown HTML CSS JavaScript | Custom Select input HTML CSS and JavaScript

Custom Dropdown HTML CSS JavaScript | Custom Select input HTML CSS and JavaScript. Let's create a custom select dropdown in HTML.

Slideshow with HTML, CSS, and JavaScript / How to Create a Slideshow with HTML, CSS, and JavaScript

In this tutorial, we will build a Slideshow of the Social Media Icons with HTML, CSS, and JavaScript

Image slider in HTML, CSS and, JavaScript || Carousel in HTML, CSS, and, JavaScript

Create a simple and responsive image slider or carousel using HTML, CSS, and javaScript.

Calendar with HTML, CSS, and JavaScript - How to build calendar using HTML, CSS, and JavaScript

In this tutorial, we will build a Calendar with HTML, CSS, and JavaScript

Slideshow with HTML, CSS, and JavaScript / How to create Slideshow using HTML, CSS, and JavaScript

In this tutorial, you will learn about how to build a cool Slideshow using HTML, CSS, and JavaScript