Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Bottom Half Hidden Text Revealer on Mouse Over in CSS
The bottom half hidden text revealer effect uses CSS clip-path and transition properties to create an interactive hover animation. When users move their cursor over text, the hidden portion gradually reveals itself, creating an engaging visual experience.
Syntax
selector {
clip-path: polygon(x1 y1, x2 y2, x3 y3, x4 y4);
transition: clip-path duration ease-function;
}
Key Properties Used
clip-path property Creates a clipping region that defines which parts of an element are visible. Uses polygon coordinates to shape the visible area.
transition property Provides smooth animation between different property states when hovering occurs.
Example: Bottom Half Text Revealer
The following example creates text where the bottom half is initially hidden and reveals on mouse hover
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
padding: 50px;
font-family: Arial, sans-serif;
}
.text-container {
position: relative;
display: inline-block;
font-size: 48px;
font-weight: bold;
color: #333;
cursor: pointer;
overflow: hidden;
}
.reveal-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
transition: clip-path 0.5s ease-in-out;
}
.text-container:hover .reveal-text {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<div class="text-container">
REVEAL TEXT
<div class="reveal-text">REVEAL TEXT</div>
</div>
</body>
</html>
Text appears with bottom half hidden initially. On hover, a colorful gradient version of the text smoothly reveals from bottom to top with a sliding animation effect.
Example: Multiple Text Lines
Here's how to apply the effect to multiple lines of text
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #1a1a1a;
color: white;
padding: 50px;
font-family: 'Georgia', serif;
}
.paragraph-revealer {
position: relative;
font-size: 24px;
line-height: 1.6;
max-width: 600px;
}
.hidden-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff4757;
color: white;
clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
transition: clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: inherit;
}
.paragraph-revealer:hover .hidden-overlay {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
</style>
</head>
<body>
<div class="paragraph-revealer">
Typography plays a crucial role in web design. It conveys messages, creates visual hierarchy, and enhances user experience through careful selection of fonts, sizes, and spacing.
<div class="hidden-overlay">
Typography plays a crucial role in web design. It conveys messages, creates visual hierarchy, and enhances user experience through careful selection of fonts, sizes, and spacing.
</div>
</div>
</body>
</html>
A paragraph of white text appears on a dark background. On hover, red text smoothly reveals from the middle outward, creating a striking color transition effect.
How It Works
Positioning The reveal element is positioned absolutely over the original text
Clipping
clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%)hides the bottom half initiallyTransition On hover, the polygon changes to show the full element
Animation CSS transitions create smooth movement between states
Conclusion
The bottom half hidden text revealer creates engaging hover effects using CSS clip-path and transition properties. This technique works well for headings, call-to-action text, and interactive UI elements that need visual emphasis.
525 Views
