CSS How to gradually change the width of a section element when hovering over it
CSS How to Gradually Change the Width of a Sectional Element on Hover
Whenever we want to gradually change the style of an element from one form to another, whether it’s due to some user interaction or simply a duration on the site, you can use animation to change a large amount of styles over any period of time. Let’s look at the properties you’ll need for animation.
- Keyframes – This is used to specify an animation for an element. It contains the changes that will occur to the element’s style. The element then moves from the first style to the last mentioned style.
-
Animation-name – This is used to reference the animation so you don’t have to specify the rule every time you need to add an animation.
-
Animation-duration – This specifies the duration of the animation that will be applied to the element. It starts at 0ms and can last indefinitely.
-
Animation-iteration-count – This determines how many times the animation will repeat.
-
Animation-delay – If you need the animation to be delayed for a certain amount of time, you can use this property.
-
Animation-direction – This specifies whether the animation should be forward, reverse, or alternating between the two directions.
-
Animation-timing-function – This property is used when you want the animation to have different timings at the beginning, middle, and end.
We can also use the shorthand property, “animation,” which is a combination of all of these properties. It applies to all elements but cannot be inherited. It is important to note that the order of the values does matter when using the shorthand, as each value will be interpreted differently depending on its order.
Example
Below is an example of using animation in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations in CSS</title>
<style>
@keyframes example {
from {
background-color: maroon;
}
to {
background-color: plum;
}
}
div {
width: 500px;
height: 500px;
margin: 12.25%;
background-color: maroon;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 4s;
}
</style>
</head>
<body> <div></div>
</body>
</html>
Now that we know what animations are in CSS, we’ll discuss how to animate a div element so that it gradually changes width.
Transition Property
We’ll use the transition property to solve this problem. This property is used to add transition effects to elements. It’s one of the shorthand properties available in CSS.
It defines the transition that occurs when an animation changes an element from one state to another. It applies to all elements and isn’t inherited.
The following properties make up the shorthand transition properties.
- Transition-delay – This specifies how long the browser should wait before applying the transition properties. Its initial value is 0; positive values make it wait longer, while negative values make the transition faster.
-
Transition-duration – This sets the length of time the transition effect is visible, after which the animation ends. The default value of this property is 0, so the animation is invisible by default.
-
Transition-property – This sets the elements the transition effect will be applied to. It can have two possible values, none and all. By default, the value is set to all, so all elements have the transition effect, but none, so no elements have the transition effect.
-
Transition-timing-function – This property is used when you need to control the speed of the transition at the beginning, middle, and end of the animation. The initial value is set to easy, but CSS has many predefined timing functions.
We can set the transition property on hover and the animation will trigger on hover or use the active pseudo-class. We can also assign classes dynamically with JS and use them to trigger the transition.
Example
Below is a simple example of using the transition property in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
font-size: 14px;
transition: font-size 4s 1s;
}
a:hover {
font-size: 36px;
}
</style>
</head>
<body>
This text will have its font modified on hover
</body>
</html>
When executing the above program, a text will be displayed, and if you hover it, you can see the transition of the text.
Using Transitions as a Solution
We will now see an example of using transitions to solve the problem at hand.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: royalblue;
}
div {
width: 150px;
height: 200px;
background: linear-gradient(
0deg,
rgb(111, 190, 87) 20%,
rgb(119, 218, 119) 50%,
rgb(93, 81, 76) 98%
);
transition: width 2s;
}
.textCenter {
display: flex;
align-items: center;
justify-content: center;
}
div:hover { width: 500px;
}
</style>
</head>
<body>
<h1>Example of using the transition property to gradually increase width on hover.</h1>
<div class="textCenter">Please hover over here</div>
</body>
</html>
The output of the above program is a div box whose width gradually changes from 150px to 500px over 2 seconds.
Conclusion
In summary, using the CSS hover selector to gradually change the width of a section element is an effective way to add subtle animation effects without any additional code. It can be particularly useful when creating interactive elements on a web page, such as buttons and menus. With just a few lines of code, you can create dynamic effects that help your web page stand out from the crowd.