How to Add Transition on Hover Using CSS?
Last Updated :
31 Jul, 2024
Transitions are the CSS technique used to create smooth changes between property values over a specified duration. By defining a transition, you can animate properties such as color, size, or position, making changes appear gradual rather than abrupt. For hover effects, transitions can enhance user experience by smoothly altering styles when a user interacts with an element.
These are the following approaches to add transition on hover with CSS:
Using transition Property
In this approach, we are using the transition property to create a smooth hover effect on list items. The .list-item class specifies that the color and transform properties should transition over 0.3 seconds with an ease timing function. When a list item is hovered over, its color changes to red and it scales up by 1.2 times, creating a visually appealing effect.
Example: The below example uses the transition Property to add transition on hover with CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 1</title>
<style>
h1 {
color: green;
}
.list-item {
transition: color 0.3s ease, transform 0.3s ease;
}
.list-item:hover {
color: red;
transform: scale(1.2);
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<h3>Approach 1: Using `transition` Property</h3>
<ul>
<li class="list-item">Data Structures</li>
<li class="list-item">Algorithms</li>
<li class="list-item">Programming Languages</li>
<li class="list-item">Web Development</li>
<li class="list-item">Machine Learning</li>
</ul>
</div>
</body>
</html>
Output:
Using CSS Animations
In this approach, we are using CSS animations to create a hover effect on the image. The scale-up and scale-down keyframe animations control the scaling of the image. When the image container is hovered over, the scale-down animation reduces the image size, giving the appearance of a smooth scaling effect. The scale-up animation is used as a placeholder to ensure the initial state of the image is preserved.
Example: The below example uses the CSS Animations to add transition on hover with CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example 2</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
h1 {
color: green;
}
h2 {
color: #333;
}
.image-container {
display: inline-block;
overflow: hidden;
}
.image-container img {
width: 300px;
height: auto;
animation: scale-up 0.5s forwards;
}
.image-container:hover img {
animation: scale-down 0.5s forwards;
}
@keyframes scale-up {
from {
transform: scale(1);
}
to {
transform: scale(1);
}
}
@keyframes scale-down {
from {
transform: scale(1);
}
to {
transform: scale(0.8);
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Approach 2: Using CSS Animation</h2>
<div class="image-container">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240305215328/gfglogo.png"
alt="GeeksforGeeks Logo">
</div>
</body>
</html>
Output:
Similar Reads
How to Transition Height from 0 to Auto using CSS? To transition height from 0 to auto in CSS, apply max-height with a transition effect. Using max-height allows for smooth expansion and collapse, making the element responsive while maintaining the animated effect.Creating Height Transition using max-heightTo create a height transition from 0 to aut
3 min read
How to Create a Transition Effect on Hover Pagination using CSS ? In web development, pagination is a common feature used to navigate through a large set of data or content. Adding a transition effect on hover to pagination buttons can enhance user interaction and provide visual feedback. ApproachIn this approach, we are going to use CSS transitions. It enables sm
1 min read
How to Add Hoverable Pagination using CSS ? Pagination is a common technique for controlling content that covers multiple pages. Hoverable pagination provides a sleek alternative to traditional pagination styles by enabling users to preview the content without clicking by hovering over the pagination elements. Traditional pagination styles re
2 min read
How to Change Image Opacity on Hover using CSS ? Changing the opacity of an image on hover can add a more elegant and interactive effect to your website. This simple yet effective technique can be implemented using CSS. When a user hovers over an image, it gradually becomes more transparent, pointing out the interaction and creating an attractive
2 min read
How to use Animation and Transition Effects in CSS ? With the help of CSS, you may design impressive visual effects for your website. Animation and transition effects are two common ways to add animation and visual effects to a web page. By attracting users' attention and directing them through your material, these effects may make your website more d
4 min read
How to create multiple transitions on an element using CSS ? In this article, we are going to learn how we can have multiple transitions on an element. Generally, we apply or create more than one transition to create some effects in our design. In CSS there are certain properties that can be transitioned.Approach: To have multiple transitions on an element, b
3 min read