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
Selected Reading
How to add transition on hover with CSS?
The CSS transition property allows you to create smooth animations when an element's properties change, such as on hover. Transitions provide a way to control the speed and timing of these changes, making your website more interactive and visually appealing.
Syntax
selector {
transition: property duration timing-function delay;
}
selector:hover {
/* Properties to change */
}
Transition Properties
| Property | Description |
|---|---|
| transition-property | The CSS property to which the transition is applied |
| transition-duration | How long the transition takes to complete (in seconds or milliseconds) |
| transition-timing-function | The speed curve of the transition (ease, linear, ease-in, etc.) |
| transition-delay | The delay before the transition starts (in seconds or milliseconds) |
Example: Basic Hover Transition
The following example demonstrates a simple scale transition on hover −
<!DOCTYPE html>
<html>
<head>
<style>
.scale-btn {
display: inline-block;
background-color: #0c1377;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
transition: transform 0.3s ease;
cursor: pointer;
}
.scale-btn:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>Transition on Hover Example</h1>
<button class="scale-btn">Hover Here</button>
</body>
</html>
A blue button that smoothly scales up by 20% when hovered over, creating a smooth zoom effect.
Example: Multiple Property Transitions
This example shows how to animate multiple CSS properties with different timing settings −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-transition {
width: 200px;
height: 100px;
background-color: #3498db;
border-radius: 5px;
margin: 20px;
transition: background-color 0.5s ease,
border-radius 0.3s ease-in,
transform 0.2s ease-out;
cursor: pointer;
}
.multi-transition:hover {
background-color: #e74c3c;
border-radius: 50px;
transform: translateY(-10px);
}
</style>
</head>
<body>
<h1>Multiple Property Transitions</h1>
<div class="multi-transition"></div>
<p>Hover over the box above to see multiple transitions in action.</p>
</body>
</html>
A blue rectangular box that smoothly changes to red, becomes more rounded, and moves up slightly when hovered over.
Example: Transition with Delay
This example demonstrates using transition delays to create a staggered effect −
<!DOCTYPE html>
<html>
<head>
<style>
.delayed-transition {
width: 150px;
height: 150px;
background-color: #9b59b6;
border-radius: 10px;
margin: 20px;
transition: border-radius 1s ease 0.5s,
background-color 0.8s ease-out 0.2s;
cursor: pointer;
}
.delayed-transition:hover {
background-color: #f39c12;
border-radius: 75px;
}
</style>
</head>
<body>
<h1>Transition with Delay</h1>
<div class="delayed-transition"></div>
<p>Hover to see the color change first, then the shape transformation.</p>
</body>
</html>
A purple square that first changes color to orange (after 0.2s delay), then transforms into a circle (after 0.5s delay) when hovered.
Conclusion
CSS transitions provide an elegant way to animate property changes on hover. By combining different timing functions, durations, and delays, you can create sophisticated interactive effects that enhance user experience.
Updated on: 2026-03-15T15:00:06+05:30
764 Views
Advertisements