Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Bottom Half Hidden Text Revealer on Mouse Over in CSS
Typography is used in web design to engage people, convey a message, and make a visual effect. Compared to print typography, digital typography allows web designers more fluidity and versatility. It's a crucial element in user interface design. It aids in building a strong visual hierarchy, establishing the website's general tone, and striking a solid aesthetic balance.
In addition to improving readability and accessibility, typography should be utilized to enlighten people. In this article, we will discuss about how to create an effect in which the bottom half of the text will be hidden and it will appear when the cursor is hovered on it.
Properties Used
Following are the properties we use in the example −
Clip-path property − The clip-path CSS property is used to create a clipping path, which is a non-rectangular region that defines the visible area of an element. The property is used to hide parts of an element that fall outside of the clipping path, allowing for complex shapes and effects that were previously only possible with image masks or SVG.
CSS Transition property − The transition CSS property is used to create smooth animated transitions between different CSS styles or property values. When a transition is applied to an element, it specifies the duration, timing function, delay, and property or properties that are being transitioned. This property can be applied to a wide variety of CSS properties, including background color, opacity, transform, and more.
Example HTML
We start with a simple HTML structure consisting of a container element and a hidden-text div. The container element is just a wrapper for the hidden-text div and the text "Hover over this text to reveal it.".
The container element has a position of relative, which is required for the absolutely positioned hidden-text div to be positioned relative to it. The hidden-text div has a position of absolute, which allows us to position it on top of the container element.
The hidden-text div has a top, left, right, and bottom of 0, which positions it at the top-left corner of the container element and stretches it to cover the entire container element. The bottom is set to 50%, which hides the bottom half of the hidden-text div.
The background-color of the hidden-text div is set to white and the color is set to orange. The font-size is set to 30px, which makes the text larger and easier to read. The text-align is set to center, which centers the text horizontally. The line-height is set to 200%, which increases the vertical space between lines of text.
The clip-path property is set to a polygon that hides the bottom half of the hidden-text div. It consists of four points that define a rectangle: 0 0 (top-left), 100% 0 (top-right), 100% 100% (bottom-right), and 0% 100% (bottom-left).
The transition property is used to create a smooth transition when the clip-path is changed in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> Mouse hover effects on text </title>
<style>
body {
background-color: cyan;
margin: 10px;
padding: 5px;
}
.container {
position: relative;
}
.hidden-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 30px;
font-family: algerian;
color: orange;
background-color: white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.container:hover .hidden-text {
opacity: 1;
clip-path: circle(0 at 0 0);
}
</style>
</head>
<body>
<div class="container">
<div class="hidden-text">This is the hidden text. </div>
<h1> Hover over this text to reveal it with a circular mask. </h1>
</div>
</body>
</html>
Example Java Script
Following is the JavaScript code −
This code sets up an event listener on the mousemove event for the .container element. When the user moves the mouse within the container, the event listener callback function is executed.
Inside the callback function, the code selects the .hidden-text element, which is the element that we want to reveal on mouseover. Then, a variable clipPath is created using the polygon() function to define the shape of the clipping path.
The polygon is defined using four coordinates, which represent the four corners of the clipping path. The first two coordinates are always 0 0, which represents the top-left corner of the element. The third coordinate, 100% ${100 - e.clientY / window.innerHeight * 100}%, represents the bottom-right corner of the clipping path.
The fourth coordinate is 0% ${100 - e.clientY / window.innerHeight * 100}%, which represents the bottom-left corner of the clipping path. The 0% indicates the left edge of the element, and the 100 - e.clientY / window.innerHeight * 100 calculates the vertical position of the mouse relative to the height of the element.
The 100% indicates the right edge of the element, and the 100 - e.clientY / window.innerHeight * 100 calculates the vertical position of the mouse relative to the height of the element, and subtracts it from 100 to ensure that the clipping path grows upwards from the bottom of the element.
Finally, the style.clipPath property of the .hidden-text element is set to the clipPath variable, which applies the clipping path to the element, revealing the bottom half of the text as the mouse moves up.
The JavaScript code adds an event listener to the container element to listen for mousemove events. When the mouse moves over the container, the clip-path of the hidden-text div is changed dynamically based on the position of the mouse.
<script>
const container = document.querySelector('.container');
container.addEventListener('mousemove', (e) => {
const hiddenText = document.querySelector('.hidden-text');
hiddenText.style.clipPath = `circle(50px at ${e.offsetX}px ${e.offsetY}px)`;
});
</script>
Example
Following is the complete example −
<!DOCTYPE html>
<html>
<head>
<title> Mouse hover effects on text </title>
</head>
<style>
body {
background-color: cyan;
margin: 10px;
padding: 5px;
}
.container {
position: relative;
}
.hidden-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 30px;
font-family: algerian;
color: orange;
background-color: white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.container:hover .hidden-text {
opacity: 1;
clip-path: circle(0 at 0 0);
}
</style>
<script>
const container = document.querySelector('.container');
container.addEventListener('mousemove', (e) => {
const hiddenText = document.querySelector('.hidden-text');
hiddenText.style.clipPath = `circle(50px at ${e.offsetX}px ${e.offsetY}px)`;
});
</script>
<body>
<div class="container">
<div class="hidden-text">This is the hidden text. </div>
<h1> Hover over this text to reveal it with a circular mask. </h1>
</div>
</body>
</html>
Conclusion
When using the clip-path property, it is important to ensure that the element being clipped has a defined width and height, otherwise the clipping path may not work as expected. Additionally, the property may not be fully supported in older browsers, so it is important to test thoroughly and provide fallback styles if necessary.
300 Views
