Bottom Half Hidden Text Revealer on Mouse Over in CSS
- 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.