How hovering over a division element to gradually change the width in CSS ?


Whenever we want to gradually change the style of an element from one form of styling to some another style, whether it may be some interaction from user or through duration of stay on the site. You can use animations to change a lot of styles for any duration of time. Let us look at the properties that you need for animations.

  • Keyframes − This is used to specify an animation for an element. It contains the changes that will occur to the style of the element. The element then moves from the style at the beginning to the style mentioned at the end.

  • Animation-name − This is for referencing the animations so that you do not have to specify the rules each time you need to add an animation.

  • Animation-duration − This specifies the duration for which the animation will apply to the element. It has the initial value of 0ms and can go on indefinitely.

  • Animation-iteration-count − This determines the number of times the animation will be repeated.

  • Animation-delay − If you need the animation to get delayed by some duration you use this property.

  • Animation-direction − This specifies whether the animation needs to be in the forward direction, reverse direction or alternate in both directions.

  • Animation-timing-function − This property is used when you want the animation to have varying timing in the beginning, middle and end.

We can also use the shorthand property, “animation”, which is comprised of all these properties. It is applied to all elements but is not inheritable. To note, the order of values does matter while using the shorthand notation as each value is interpreted differently based on its order.

Example

An example of using animations in CSS is given below.

<!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 will discuss how we can animate the div element so that we can make it gradually change its width.

Transition Property

We will use the transition property to solve the problem. This property is used to add transition effects to an element. It is one of the shorthand property available in CSS.

It defines the transition that occurs while animation takes place, and the element changes its state from one to another. It applies to all elements and is not inheritable.

The following properties make up the shorthand transition property.

  • Transition-delay − This specifies the time that the browser needs to wait for after which the transition property is applied. Its initial value is 0, a positive value makes it wait longer while a negative value makes the transition faster.

  • Transition-duration − This sets the time duration for which the transition effect will be visible and after this duration the animation ends. The default value of this property is 0, therefore the animation is not visible by default.

  • Transition-property − It sets the element(s) to which the transition effect will be applied. It can have two possible values, none, and all. By default, the values is set to all so all the elements has the transition effect applied to them but none makes it so that no element has that transition.

  • Transition-timing-function  This property is used when you need to control the speed of transition at the beginning, middle and end of animation. The initial value is set to ease, but CSS has a lot pre-defined timing function.

We can set the transition property on hover state, where the animation will trigger on hovering or using the active pseudo class. We can also use JS to dynamically assign classes and use them to trigger transitions.

Example

A simple example of using transition property in CSS is given below.

<!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>
   <a>This text will have its font modified on hover</a>
</body>
</html>

On executing the above program, a text will be displayed and if you hover it you can see the transition in the text.

Using Transition as Solution

We will now see an example of using transition 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 transition property to increase width gradually on hover.</h1>
   <div class="textCenter">Please hover over here</div>
</body>
</html>

The output of the above program is a div box which changes its width from 150px to 500px gradually over 2s.

Conclusion

To conclude, Using the CSS hover selector to gradually change the width of a division element is an effective way to add a subtle animation effect without needing any additional code. It can be especially useful when creating interactive elements within webpages, such as buttons and menus. With just a few lines of code, you can create dynamic effects that will help make your page stand out from the rest.

Updated on: 27-Feb-2023

525 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements