How to create a Smooth Transition on hover using CSS ?

Creating a smooth transition on hover in CSS involves using the transition property to define the property being animated and the duration of the transition. This effect is commonly used to make changes to an element’s appearance smooth and visually appealing when a user hovers over it.

Syntax:

/* Example of creating a smooth transition on hover */
.element {
  transition: [property] [duration] [timing-function] [delay];
}

.element:hover {
  /* Styles to apply on hover */
  [property]: [new-value];
}

Features:

• The transition Property:
  • Specifies the property to transition.
  • Defines the duration (e.g., 0.3s for 0.3 seconds).
  • Specifies the timing function (e.g., ease for a smooth acceleration-deceleration effect).
  • Optionally, sets a delay before the transition starts.
• The :hover Pseudo-class:
  • Defines styles to apply when the element is hovered.