How To Change Background Image On Hover In Css

CSS Transition Examples – How to Use Hover Animation, Change Opacity, and More

If you lot are working with spider web technologies similar CSS, HTML, and JavaScript, it'southward important to have some basic knowledge almost CSS animations and transitions.

In this commodity we are going to larn how to make some basic transition animations using CSS.

How to animate an element with basic transition on hover

In this case, we will make the opacity of an element modify when a user hovers or mouses over the element.

                <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-eight" />     <meta proper noun="viewport" content="width=device-width, initial-scale=i.0" />     <meta http-equiv="X-UA-Uniform" content="ie=edge" />     <title>Static Template</title>   </caput>   <fashion>     .elem {       background: blueviolet;       width: 300px;       acme: 150px;     }     .elem:hover {       opacity: 0.5;     }   </mode>   <body>     <div grade="elem"></div>   </body> </html>

This is a simple transition that can be triggered when we hover over the chemical element. We can add more than one transition that will run at the aforementioned time.

Let's add a scale transform property to add scale transition to the chemical element.

                                  .elem:hover {       transform: scale(1.1);     }

But the transition doesn't seem to be smooth, because nosotros didn't define the elapsing of the transition or employ any timing function.

If we add the transition holding, information technology volition make the element move more than smoothly.

                                  .elem {       groundwork: blueviolet;       width: 300px;       peak: 150px;       margin: 20px auto;       transition: 500ms linear;      }

Let'southward interruption down how the transition property works:

                                  transition: 500ms linear;

500ms: the elapsing of the transition in milliseconds
linear: the timing-function

                div {     transition: <property> <elapsing> <timing-function> <delay>; }

We tin add more options like below (examples from the MDN):

                #filibuster {   transition-property: font-size;   transition-elapsing: 4s;   transition-delay: 2s; }

So what'due south this code doing?

transition-property: the belongings you want to animate. Information technology tin be whatever CSS element like background, height, translateY, translateX, and and then on.
transition-duration: the elapsing of the transition
transition-delay: the filibuster before the transition starts

You lot tin can acquire more about the unlike uses of transition in CSS hither.

How to brand transitions more interactive using the blitheness holding and keyframes

We tin exercise more than with CSS transitions to make this blitheness more creative and interactive.

How to motion an chemical element with Keyframes

Allow's expect at an example where the element moves from point A to betoken B. We will be using translateX and translateY.

                <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-viii" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Static Template</title>   </head>   <style>     .elem {       background: orangish;       width: 300px;       acme: 150px;       animation: moveToRight 2s ease-in-out;       animation-filibuster: 1000ms;     }      @keyframes moveToRight {       0% {         transform: translateX(0px);       }       100% {         transform: translateX(300px);       }     }   </manner>   <body>     <div form="elem"></div>   </body> </html>

And this is what we get:

This time we used new backdrop similar animation and keyframes. We used the animation property to define the animation name and duration, and keyframes allow us depict how the chemical element should move.

                                  blitheness: moveToRight 2s ease-in-out;

Here I named the animation moveToRight – merely you can use any name you like. The duration is 2s , and ease-in-out is a timing function.

In that location are other timing functions you can employ like ease-in, linear, ease-out which basically make the animation smoother. You can learn more about the timing functions here.

@keyframes takes the name of the blitheness. In this case it's moveToRight.

                                  @keyframes moveToRight {       0% {         transform: translateX(0px);       }       100% {         transform: translateX(300px);       }     }

keyframes will execute the blitheness in multiples steps. The example to a higher place uses a percentage to represent the range or the order of the transitions. Nosotros could also employ the from and to methods. like below"

                                  @keyframes moveToRight {      from {         transform: translateX(0px);       }      to {         transform: translateX(300px);       }     }

from represents the starting point or the first step of the animation.

to is the end point or the terminal step of the animation to exist executed.

You may want to employ a percentage in some cases. For instance, say y'all want to add more than two transitions that will be executed in a sequence, like the following:

                                  @keyframes moveToRight {      0% {         transform: translateX(0px);       }      50% {         transform: translateX(150px);       }        100% {         transform: translateX(300px);       }     }

We can exist more artistic and animate many properties at the same time like in the following case:

You lot tin can play effectually with properties and animation techniques in the sandbox here:

They are plenty more things we tin can exercise with keyframes. Starting time, allow's add more transitions to our animation.

How to breathing more than properties and include them in the transition

This time we volition animate the background, and we will make the element move in a foursquare blueprint. Nosotros'll make the animation run forever using the infinite belongings equally a timing function.

                <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta proper name="viewport" content="width=device-width, initial-scale=i.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />     <title>Static Template</title>   </head>   <fashion>     .elem {       background: orangish;       width: 250px;       superlative: 250px;       border-radius: 10px;       blitheness: moveToLeft 5s linear infinite;       blitheness-delay: 1000ms;     }      @keyframes moveToLeft {       0% {         transform: translateX(0px);         background: linear-gradient(           to correct,           #ff8177 0%,           #ff867a 0%,           #ff8c7f 21%,           #f99185 52%,           #cf556c 78%,           #b12a5b 100%         );       }       25% {         transform: translateX(400px);         background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);       }       50% {         transform: translateY(200px) translateX(400px);         groundwork: linear-slope(to tiptop, #30cfd0 0%, #330867 100%);       }        75% {         transform: translateX(0px) translateY(200px);         background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);       }       100% {         transform: translateY(0px);       }     }   </style>   <body>     <div class="elem"></div>   </body> </html>

Let'south break information technology down. Start nosotros add infinite to make the blitheness run forever.

                animation: moveToLeft 5s linear infinite;

And then we split the animation into 4 steps. At each step, we'll run a different transition and all the animation will run in a sequence.

Starting time footstep: set the element horizontally to translateX(0px), and change the background to the gradient.

                                  0% {         transform: translateX(0px);         background: linear-slope(           to right,           #ff8177 0%,           #ff867a 0%,           #ff8c7f 21%,           #f99185 52%,           #cf556c 78%,           #b12a5b 100%         );       }

The second blitheness will movement the element from the left to the right and change the groundwork color.

                                  25% {         transform: translateX(400px);         background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);       }

The third animation will move the element down using translateY and change the background color again.
In the fourth step, the element will move back to the left and modify the background color.
In the fifth animation the element should get back to its original identify.

Wrapping up

In this commodity, we covered various things you tin practice with CSS transitions. You can employ CSS transitions in many ways in your applications to create a ameliorate user experience.

After learning the basic of CSS animations yous may want to go beyond and make more complex things that require user interaction. For this you tin use JavaScript or any 3rd party animation libraries out at that place.