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
How to add transition on hover with CSS?
To add a transition with hover on CSS, first, use the :hover selector. Under this, use the transform property and scale the element. For the transition, use the transition property. The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line −
transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property − The name of the property the effect is on
transition-timing function − The speed curve of the transition
transition-delay − Set the delay for the transition effect in seconds
Remember, you need to set the CSS property on which the effect is applied and the duration as well.
Transition With Duration
Let us see an example to add transition on hover. We have set the transition duration using the transition shorthand property −
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.scaleBtn {
display: inline-block;
background-color: #0c1377;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
transition: 0.3s;
margin: 20px;
}
.scaleBtn:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>Transition on hover example</h1>
<button class="scaleBtn">Hover Here</button>
</body>
</html>
Transition With Timing, Duration, Property and Delay
In this example. We have set the transition with all the properties −
The Transition-duration
Below, the duration is set for the border-radius and background-color property. The transition-duration is set to 2 seconds −
2s for the border-radius property 2s for the background-color property
The Transition-delay
The delay is set on the border-radius and background-color property. The transition-delay is set to 1 second and 2 seconds respectively;
1s for the border-radius property 2s for the background-color property
The Transition-timing-function
The transition is set on the border-radius and background-color property. The transition-timing-function is set to −
ease for the border-radius ease-out for the background-color property
Example
Let us see an example to set the transition with timing, duration, property and delay. We have set the transition shorthand property −
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background-color: rgb(25, 0, 255);
border: 2px solid red;
transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ;
}
.container:hover div {
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Transition shorthand property</h1>
<div class="container">
<div></div>
</div>
<p>Hover over the above div to change its color and its shape to oval</hp>
</body>
</html>
436 Views
