In this CSS effect, the bottom half of the text is hidden, and when the user hovers over 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 the 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.
Example: In this example, we are implementing the above-explained approach.
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: