How to Add Transition on Hover Using CSS? Last Updated : 31 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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:Table of ContentUsing transition PropertyUsing CSS AnimationsUsing transition PropertyIn 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 AnimationsIn 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: Comment More infoAdvertise with us Next Article How to Add Transition on Hover Using CSS? A anjalibo6rb0 Follow Improve Article Tags : Web Technologies CSS CSS-Questions 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 Skew Text on Hover using HTML and CSS? Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.First Section: In this section we will create a basic div tag whi 2 min read How to Shake Text on hover using HTML and CSS? Shaking Text animation is a very cool animation which can be used in websites, this animation can be easily created using some basic HTML and CSS, the below section will guide on how to create the animation.HTML Code: In this section we have a basic div element which contains some text inside of it. 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 How to Change Image on Hover using Tailwind CSS? One common effect is changing an image when the user hovers over it. We use Tailwind CSS, a utility-first CSS framework, to accomplish this without any additional JavaScript logic for the hover effect. By utilizing Tailwind's built-in classes we can create smooth transitions between two images where 2 min read How to Fade a Button on Hover using CSS ? Fading a button on Hover in CSS is a visually engaging effect that can be done using various approaches. Below are the approaches to fade a button on hover using CSS: Table of Content Using opacity PropertyUsing Linear Gradient with RGBA ValueUsing opacity PropertyThis approach utilizes the CSS opac 2 min read Like