🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
Introduction
Creating an expanding text effect on hover can make your web content more engaging and interactive. This effect enlarges the text when hovered over, creating a dynamic visual transformation. You can achieve this using the transform property in combination with transition for smooth animation.
In this tutorial, you'll learn how to create an expanding text effect on hover using HTML and CSS.
Problem Statement
Create a CSS code that:
- Expands the size of text when hovered using
transform: scale(). - Demonstrates smooth transitions to create a seamless hover effect.
Example:
- Input: A paragraph element with the text "Hover Over Me".
- Output: The text expands smoothly when the user hovers over it.
Solution Steps
- Use
transform: scale()for Expanding Effect: Apply thetransform: scale()property to enlarge the text on hover. - Use
transitionfor Smooth Animation: Add thetransitionproperty to ensure the text expansion occurs smoothly over a set duration.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expanding Text on Hover</title>
<style>
/* Step 1: Define base text style */
.expanding-text {
font-size: 2rem;
color: #3498db;
font-family: Arial, sans-serif;
display: inline-block;
transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
}
/* Step 2: Apply expand effect on hover */
.expanding-text:hover {
transform: scale(1.5); /* Enlarge text by 1.5 times */
color: #e74c3c; /* Change text color when hovering */
}
/* Center the text container */
.container {
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<p class="expanding-text">Hover Over Me</p>
</div>
</body>
</html>
Output
Explanation
Step 1: Use transform: scale() for Expanding Effect
- The
transform: scale()property enlarges the text when hovered. It scales the text by a factor of1.5, making it 150% of its original size:.expanding-text:hover { transform: scale(1.5); }
Step 2: Use transition for Smooth Animation
- To ensure a smooth transition when the text expands, the
transitionproperty is used:.expanding-text { transition: transform 0.3s ease, color 0.3s ease; }0.3s: The expansion happens over 0.3 seconds.ease: The transition starts slow, speeds up, and then slows down again.
Step 3: Add a Color Change on Hover
- Along with the scaling effect, the text color is changed on hover for additional visual impact:
.expanding-text:hover { color: #e74c3c; }
Step 4: Center the Text
- Use
text-align: centerto center the text within its container andmargin-topto add some vertical space:.container { text-align: center; margin-top: 100px; }
Conclusion
Creating an expanding text effect on hover with CSS is simple using the transform: scale() and transition properties. This effect enhances interactivity, making the text expand smoothly and change color when hovered over, creating a visually engaging experience for users on your webpage.
Comments
Post a Comment
Leave Comment