The web page uses the hover effect to operate elements with functions or designs using cursor or mouse movement. The animation adds motion or animated effects using CSS animation and key properties on the hover function. The hover animation operates motion or animated effects on the element using the hover function or cursor movement.
Using CSS style tags, we can create interactive applications with key items and animation properties. The transition and animation are used with the ": hover" pseudo-element to activate the hover animation property in the CSS.
How to Create the Hover Animation Effect
The following steps are used to get the animation effect on the hover function using CSS.
- Use the ":hover" pseudo-element with the html tag name, id name or class name. The animation effect properties are used inside of the pseudo-element.
- Use the animation property in the hover element. We can add the duration, animation effects, transition and other css properties.
- Use sub properties of the animation property on the required element.
- Use keyframes to get a sequence of the CSS animation properties.
- Use the animation period or shorthand properties.
- We can add the duration, animation effects, transition and other css properties.
Examples
The examples below demonstrate the hover effect using various sub-properties of the animation property.
Example 1:
The samples demonstrate the keyframe and animation attributes in CSS to achieve a motion effect. The elliptical form follows a linear path, shifting in a zigzag pattern.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 80px;
top: 50px;
}
100% {
left: 88px;
top: 0;
}
}
.ellipse_div {
background: skyblue;
border-radius: 6px;
height: 100px;
position: relative;
min-width: 500px;
}
.ellipse_div:hover .ellipse {
animation: slide 3s linear;
}
.ellipse {
background: orange;
border-radius: 50%;
height: 40px;
position: absolute;
width: 50px;
}
</style>
</head>
<body>
<h3> CSS Hover Animation </h3>
<p> The ellipse shape moves linear way using the hover effect </p>
<div class = "ellipse_div">
<figure class = "ellipse"></figure>
</div>
</body>
</html>
Output:
The output displays the css hover animation.
Example 2:
The demonstrations exhibit the keyframe and animation's sub-characteristics in CSS to achieve the motion impact. The oval form follows a linear path and shifts diagonally using the shorthand technique.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<style>
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 80px;
top: 50px;
}
100% {
left: 88px;
top: 0;
}
}
.ellipse_div {
background: skyblue;
border-radius: 6px;
height: 100px;
position: relative;
min-width: 500px;
}
.ellipse_div:hover .ellipse {
animation: slide 1s ease-in-out .5s infinite alternate;
}
.ellipse_div:active .ellipse {
animation-play-state: paused;
}
.ellipse {
background: yellow;
border-radius: 50%;
height: 40px;
position: absolute;
width: 50px;
}
</style>
</head>
<body>
<h3> CSS Hover Animation </h3>
<p> The ellipse shape moves in a zigzag way with the shorthand format using the hover effect </p>
<div class = "ellipse_div">
<figure class = "ellipse"></figure>
</div>
</body>
</html>
Output:
The output displays the css hover animation.
Flip Hover Animation in CSS
The element has the capability to switch orientation between left and right sides through the hover functionality. In this scenario, we have the option to define the value of the rotateX or rotate properties for the animation effect. The degree of rotation can be adjusted to either 90 degrees or 180 degrees based on the specific animated transition needed.
Example 1:
The demonstration illustrates a flip card or component employing a CSS animation impact. The transform property can be configured with rotateY set to a 180-degree value.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<style>
.main-card {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}
.main-card-inner {
position: relative;
width: 80%;
height: 80%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.main-card:focus {
outline: 0;
}
.main-card:hover .main-card-inner,
.main-card:focus .main-card-inner{
transform: rotateY(180deg);
}
.main-card-front,
.main-card-back {
position: absolute;
width: 99%;
height: 99%;
}
.main-card-front {
background: linear-gradient(to right, #6fb1fc, #4364f7);
color: grey;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.main-card-back {
background: linear-gradient(to left, #6fb1fc, #4364f7);
color: grey;
transform: rotateY(180deg);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Flip animation on hover effect using CSS properties </p>
<div class = "main-card" tabIndex="0">
<div class = "main-card-inner">
<div class = "main-card-front">
<h3> CSS Flip Hover Animation (Y-Axis) </h3>
</div>
<div class = "main-card-back">
<h3> Thank You!!! </h3>
</div>
</div>
</div>
</body>
</html>
Output:
The output displays the css hover animation.
Example 2:
The demonstration illustrates the horizontal flip of the card or element through a CSS animation technique. By applying the transform property with a rotateX value of 180 degrees, we achieve this effect.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<style>
.main-card {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}
.main-card-inner {
position: relative;
width: 80%;
height: 80%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.main-card:focus {
outline: 0;
}
.main-card:hover .main-card-inner,
.main-card:focus .main-card-inner{
transform: rotateX(180deg);
}
.main-card-front,
.main-card-back {
position: absolute;
width: 99%;
height: 99%;
}
.main-card-front {
background: linear-gradient(to top, #6fb1fc, #4364f7);
color: grey;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.main-card-back {
background: linear-gradient(to bottom, #6fb1fc, #4364f7);
color: grey;
transform: rotateX(180deg);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
h3 {
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Flip animation for X-AXIS on hover effect using CSS properties </p>
<div class = "main-card" tabIndex = "0">
<div class = "main-card-inner">
<div class = "main-card-front">
<h3> CSS Flip (X-Axis) Hover Animation </h3>
</div>
<div class = "main-card-back">
<h3> Thank You for X-Axis Rotation!!! </h3>
</div>
</div>
</div>
</body>
</html>
Output:
The output displays the css hover animation.
Button Hover Animation in CSS
The button plays a crucial role in the functionality of every webpage. It serves as a point of interaction between the user and the webpage. Utilizing the animated button feature can enhance the visual appeal of a webpage, making it more engaging. By incorporating various animation properties, we can design buttons that are sleek and uncomplicated.
Example
The demonstration illustrates various animated effects and movements achieved through hover animation in CSS.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
* {
box-sizing: inherit;
transition-property: all;
transition-duration: 1.6s;
transition-timing-function: ease;
}
html,
body {
box-sizing: border-box;
height: 90%;
width: 90%;
}
body {
font-family: 'helvica', sans-serif;
font-weight: 200;
}
.container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1em;
text-align: center;
@media (min-width: 550px) {
flex-direction: row;
justify-content: space-between;
}
}
p {
font-size: 12px;
@media(min-width: 600px) {
left: 50%;
position: absolute;
transform: translate(-50%, 0);
top: 90%;
}
@media(max-height: 500px) {
left: 0;
position: relative;
top: 0;
transform: translate(0, 0);
}
a {
background: rgba(white, 0);
border-bottom: 1px solid;
color: white;
line-height: 1.4;
padding: .25em;
text-decoration: none;
&:hover {
background: rgba(white, 1);
}
}
}
.btn {
color: #fff;
cursor: pointer;
font-size:16px;
font-weight: 300;
line-height: 40px;
margin: 0 0 2em;
max-width: 150px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
&:hover { text-decoration: none; }
}
.btn_class-1 {
font-weight: 100;
svg {
height: 45px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
rect {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 422, 0;
transition: all 0.35s linear;
}
}
.btn_class-1:hover {
background: rgba($red, 0);
font-weight: 900;
letter-spacing: 1px;
rect {
stroke-width: 5;
stroke-dasharray: 15, 310;
stroke-dashoffset: 48;
transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}
}
.btn_class-2 {
letter-spacing: 0;
}
.btn_class-2:hover,
.btn_class-2:active {
letter-spacing: 5px;
}
.btn_class-2:after,
.btn_class-2:before {
backface-visibility: hidden;
border: 1px solid rgba(#fff, 0);
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.btn_class-2:hover:after,
.btn_class-2:hover:before {
backface-visibility: hidden;
border-color: #fff;
transition: width 350ms ease-in-out;
width: 70%;
}
.btn_class-2:hover:before {
bottom: auto;
top: 0;
width: 70%;
}
.btn_class-4 {
border: 1px solid;
overflow: hidden;
position: relative;
span {
z-index: 20;
}
&:after {
background: #fff;
content: "";
height: 155px;
left: -75px;
opacity: .5;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}
}
.btn_class-4:hover {
&:after {
left: 120%;
transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);
}
}
.btn_class-5 {
border: 0 solid;
box-shadow: inset 0 0 20px rgba(254, 255, 255, 0);
outline: 1px solid;
outline-color: rgba(254, 255, 255, .5);
outline-offset: 0px;
text-shadow: none;
transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn_class-5:hover {
border: 1px solid;
box-shadow: inset 0 0 25px rgba(254, 255, 255, .5), 0 0 20px rgba(254, 255, 255, .2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
}
</style>
</head>
<body style = "background-color:grey;">
<h4> CSS Hover Animation </h4>
<b> button hover animation using CSS properties </b>
<br>
<div class = "container">
<a href = "#" class = "btn btn_class-1">
<svg>
<rect x = "0" y = "0" fill="none" width = "100%" height = "100%"/>
</svg>
Hover 1
</a>
<a href = "#" class = "btn btn_class-2"> Hover 2 </a>
<a href = "#" class = "btn btn_class-4"><span> Hover 3 </span></a>
<a href = "#" class = "btn btn_class-5"> Hover 4 </a>
</div>
</body>
</html>
Output:
The output displays the css hover animation.
Zoom Animation on Hover Effect
If a particular element needs to enlarge or shrink with cursor movement, implementing a zoom animation effect becomes essential for the webpage. This effect emphasizes a specific part of the image or visual aspect.
Example
The demonstration illustrates the zoom functionality applied to an image on a webpage. The zoom effect can be configured by adjusting the transition duration. When the cursor hovers over the image, it enlarges to the specified scale; otherwise, it remains at its original dimensions.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<style>
.main-card {
background-color: transparent;
width: 200px;
height: 200px;
perspective: 1000px;
}
.main-card-inner {
position: relative;
width: 80%;
height: 70%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
margin-left: 50px;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.main-card:hover .main-card-inner,
.main-card:focus .main-card-inner{
transform: scale(1.2);
}
h3 {
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Zoom animation on hover using CSS properties </p>
<div class = "main-card" tabIndex="0">
<div class = "main-card-inner">
<img srcset = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px,
123px,
120px">
</div>
</div>
</body>
</html>
Output:
The output displays the css hover animation.
Rotate Animation on the Hover Effect
If the element needs to rotate in a specific direction, the CSS animation property can be used to rotate it to the desired angle. Utilizing the rotate property with the specified value allows for the manipulation of the webpage's orientation.
Example
The illustration demonstrates the rotate effect applied to an image or element on a webpage. In this instance, the image undergoes a 180-degree rotation, while the text element is rotated by 90 degrees.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<style>
.main-card {
background-color: transparent;
width: 200px;
height: 200px;
}
.main-card-inner {
position: relative;
width: 80%;
height: 70%;
text-align: center;
transition: transform 0.8s;
margin-left: 50px;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
}
.main-card:hover .main-card-inner{
transition: 0.80s;
-webkit-transition: 0.80s;
-moz-transition: 0.80s;
-ms-transition: 0.80s;
-o-transition: 0.80s;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
margin-left: 50px;
}
h3 {
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
color: navy;
}
.main-card-front {
position: relative;
width: 80%;
height: 30%;
text-align: center;
transition: transform 0.8s;
margin-left: 50px;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
}
.main-card:hover .main-card-front{
transition: 0.80s;
-webkit-transition: 0.80s;
-moz-transition: 0.80s;
-ms-transition: 0.80s;
-o-transition: 0.80s;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
margin-left: rotate(90deg);
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Zoom animation on hover using CSS properties </p>
<div class = "main-card" tabIndex="0">
<div class = "main-card-inner">
<img srcset="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sizes="120px,
123px,
120px">
</div>
</div>
<div class = "main-card" tabIndex="0">
<div class = "main-card-front">
<h3> CSS Rotate Hover Animation </h3>
</div>
</div>
</body>
</html>
Output:
The output displays the css hover animation.
Pause Mode for Hover Animation Effect
The animation employs the sub-property to control the playback of the motion element. Halting the motion can be achieved by utilizing the animation-play-state property set to the value of paused.
Example
The illustration demonstrates the pause functionality on the web page element. In this scenario, the square transitions through various colors continuously, but we pause to showcase a specific color of the square element.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<style>
#box {
height: 100px;
width: 100px;
background-color: red;
/* Safari 4+ browser */
-webkit-animation: animationName 5s ease 0s infinite normal;
-moz-aanimation: animationName 5s ease 0s infinite normal; /* Fx 5+ */
-o-animation: animationName 5s ease 0s infinite normal;/* Opera 12+ */
animation: animationName 5s ease 0s infinite normal;
}
#box:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
cursor: pointer;
}
@-webkit-keyframes animationName {
0% { background: red; }
25% { background: orange; }
50% { background: blue; }
75% { background: yellow; }
100% { background: dodgerblue; }
}
@-moz-keyframes animationName {
0% { background: red; }
25% { background: orange; }
50% { background: blue; }
75% { background: yellow; }
100% { background: dodgerblue; }
}
@-o-keyframes animationName {
0% { background: red; }
25% { background: orange; }
50% { background: blue; }
75% { background: yellow; }
100% { background: dodgerblue; }
}
@keyframes animationName {
0% { background: red; }
25% { background: orange; }
50% { background: blue; }
75% { background: yellow; }
100% { background: dodgerblue; }
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Pause animation on hover using CSS properties </p>
<div id = "box">
</div>
</body>
</html>
Output:
The output displays the css hover animation.
Menu Hover Animation Effect
We have the ability to generate an animation impact on the menu bar situated on the webpage. It is feasible to produce an appealing navigation bar.
Example:
The demonstration illustrates the animation impact on the navigation bar. This animation can be applied to both the menu items and their corresponding function tabs.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif
}
ul {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-70%, -50%);
display: flex;
li {
list-style: none;
a {
position: relative;
display: block;
text-transform: uppercase;
margin: 20px 0;
padding: 10px 10px;
text-decoration: none;
color: orange;
font-family: sans-serif;
font-size: 20px;
font-weight: 400;
transition: .4s;
z-index: 1;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 2px solid red;
border-bottom: 2px solid red;
transform: scaleY(3);
opacity: 0;
transition: .5s;
}
&:after {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
transform: scale(0);
opacity: 0;
transition: .3s;
z-index: -1;
}
&:hover {
color: white;
&:before {
transform: scaleY(1.2);
opacity: 1;
}
&:after {
transform: scaleY(1.2);
opacity: 1;
}
}
}
}
}
</style>
</head>
<body>
<h4 style = "margin-top: 10px; margin-left: 50px;"> CSS Hover Animation </h4>
<p style = "margin-top: 2px; margin-left: 50px;"> Animation on menu of hover effect using CSS properties </p>
<ul>
<li> <a href = "#"> Category </a> </li>
<li> <a href = "#"> About </a> </li>
<li> <a href = "#"> Home</a> </li>
<li> <a href = "#"> Contact </a> </li>
</ul>
</body>
</html>
Output:
The output displays the css hover animation.
Icon Hover Animation Effect
We have the capability to generate animation effects for the diverse icons present on the webpage. We can design unique icons with hover effects in an appealing manner.
Example:
The upcoming illustration demonstrates various icons along with their dynamic animations achieved through CSS attributes.
<!DOCTYPE html>
<html>
<head>
<title> CSS Hover Animation </title>
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<style>
body {
margin: 0;
padding:0;
background: grey;
}
ul {
display: flex;
position: absolute;
top: 20%;
left: 20%;
transform: translate(-50%, -50%);
}
ul li {
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background-color: #fff;
text-align: center;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .icon {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .icon {
color: #fff;
transform: rotateY(360deg);
}
ul li a:before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .8s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(4) a:before {
background: #dd4b39;
}
</style>
</head>
<body>
<h4> CSS Hover Animation </h4>
<p> Animation on icons of hover effect using CSS properties </p>
<ul>
<li>
<a href = "#">
<i class = "fab fa-facebook-f icon"></i> </a>
</li>
<li>
<a href = "#"><i class = "fab fa-twitter icon"></i></a>
</li>
<li>
<a href = "#"><i class = "fab fa-google-plus-g icon"></i></a></li>
</ul>
</body>
</html>
Output:
The output displays the css hover animation.
Conclusion
The hover animation feature is employed to enhance the design and styling of a web page. It is applied to various icons like Facebook, Twitter, and others to create a visually appealing effect.