Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a smooth hover effect using CSS transitions?
Asked on Apr 26, 2026
Answer
To create a smooth hover effect using CSS transitions, you can apply the `transition` property to the element you want to animate. This property allows you to define the duration, timing function, and properties to animate, resulting in a smooth transition effect when the element is hovered over.
<!-- BEGIN COPY / PASTE -->
<style>
.hover-effect {
background-color: lightblue;
transition: background-color 0.3s ease;
}
.hover-effect:hover {
background-color: deepskyblue;
}
</style>
<div class="hover-effect" style="width: 100px; height: 100px;">
Hover over me!
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The `transition` property is applied to the element in its normal state, not in the `:hover` state.
- The syntax for `transition` is: `transition: property duration timing-function;`.
- Common timing functions include `ease`, `linear`, `ease-in`, `ease-out`, and `ease-in-out`.
- Ensure the element has a defined initial state for the property being transitioned.
Recommended Links:
