In this article we will show you the solution of CSS hover transition effects, in CSS, adding transition property makes the web page more attractive and innovative.
Suppose, In background color we apply the transition property and set it for 1 s it means if we hover the mouse on the box it displays another color we apply but within a duration of 1 second the color changes.
Step By Step Guide On CSS Hover Transition Effects :-
Using transition effects
<html>
<head>
<title>Talkerscode</title>
<style>
.block1 {
height: 100px;
width:100px;
background-color:green;
transition: background-color 0s, transform 0s;
}
.block1:hover {
background-color: pink;
clip-path: circle(50%);
}
.block2 {
height:100px;
width:100px;
background-color:yellow;
transition: background-color 1s, transform 1s;
}
.block2:hover {
background-color: red;
clip-path: circle(50%);
}
.block3 {
height:100px;
width:100px;
background-color:green;
transition: background-color 2s, transform 2s;
}
.block3:hover {
background-color: pink;
clip-path: circle(50%);
animation: blink 1s infinite;
}
@keyframes blink{
100%{opacity:0.2;}
50%{opacity:1;}
}
</style>
</head>
<body>
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
</body>
</html>
- Within in style tag we can assign a block1,block2, and block3 class
- Within the block1,block2, and block3 classes we can assign height and width so that it creates a box-like structure.
- Within block1 class, we assign a background color green and assign a transition property to change the background color within a duration of 0 seconds.
- We apply a hover effect in the block1 class and apply the background color as pink so that it changes the background color from green to pink while hovering the mouse in the box.
- And also we apply a clip path so that when the user hovers the mouse in the box it will change shape into the circle.
- Within the block2 class, we assign a background color yellow and assign a transition property to change the background color within a duration of 1 second.
- We apply a hover effect in block2 class and apply the background color as yellow so that it changes the background color from yellow to red while hovering the mouse in the box.
- And also we apply a clip path so that when the user hovers the mouse in the box it will change shape into a circle.
- Within the block3 class, we assign a background color green and assign a transition property to change the background color within a duration of 2 seconds.
- We apply a hover effect in block3 class and apply the background color as pink so that it changes the background color from green to pink while hovering the mouse in the box.
- And also we apply clip path so that when the user hovers the mouse in the box it will change the shape into a circle and apply animation for 1s so that the box is blink. We assign keyframes named blink so that the box will blink in different opacity.
- Within a body, we can assign a div class block1,block2, and block3.
Example 2
<html>
<head>
<title>Talkerscode</title>
<style>
.block{
height:150px;
width:150px;
background-color: green;
transition:height 2s;
transition-delay: 1s;
}
.block:hover{
background-color: red;
height:300px;
width:300px;
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
- Within the Style tag, we can assign a block class.
- Within the block class, we assign a height and width so that it creates a box-like structure.
- We assign a background color as green and assign a transition property that applies in height at 2 seconds which means the changement occurs in height in 2 seconds.
- And assign a transition delay at 1 second which means changement occurs after a delay of 1 second.
- Apply the hover effect in the block1 class, so that when the user hovers the mouse the background color changes from green to red, and the height and width assign to 300px.
- Within the body tag, we assign a div class block.
Conclusion :-
In Conclusion, we successfully learned how to apply the hover transition effect in CSS.
We learned two code examples that easily explain the use of the hover transition effect. You can choose any one of the mentioned examples that suits you.
I hope this article on CSS hover transition effects helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
