How to Change Image Opacity on Hover using CSS ? Last Updated : 13 Mar, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 look. These are the following approaches: Table of Content Using the opacity propertyUsing the :hover Pseudo-classUsing the opacity propertyIn this approach, we directly set the opacity of the image using the opacity property. When the image is hovered over, its opacity gradually changes, creating the desired effect. Example: This example shows how to use CSS to alter an image's opacity when it hovers over. The opacity of the image starts at 1 and smoothly increases to 0.5 when it is hovered over. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Opacity on Hover</title> <style> .image { opacity: 1; transition: opacity 0.3s ease; } .image:hover { opacity: 0.5; } </style> </head> <body> <img class="image" src="your-image.jpg" alt="Your Image"> </body> </html> Output: Using the opacity propertyUsing the :hover Pseudo-classThis approach utilizes the :hover pseudo-class to target the image when it is being hovered over. By changing the opacity within the :hover state, we achieve the desired effect. Example: This example showcases an alternative approach by adding an overlay over the image using absolute positioning. Initially, the overlay is transparent (opacity: 0). When the image container is hovered over, the overlay gradually becomes opaque (opacity: 1), creating a hover effect. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Opacity on Hover</title> <style> .image-container { position: relative; display: inline-block; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s ease; } .image-container:hover .overlay { opacity: 1; } </style> </head> <body> <div class="image-container"> <img src="./image.png" alt="Your Image"> <div class="overlay"></div> </div> </body> </html> Output: Using the :hover Pseudo-class Comment More infoAdvertise with us Next Article How to Change Image on Hover using Tailwind CSS? H heysaiyad Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads 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 Change Image on hover with CSS ? To change an image on hover with CSS, use the :hover pseudo-class on the image element and alter its properties, such as background-image or content, to display a different image when hovered over. Here are some common approaches to changing the image on hover: Table of Content Using Background Imag 2 min read How to Flip an Image on hover using CSS? Flipping an image with a mirror effect on hover using CSS enhances visual interaction by applying transformations along the X or Y axis. This dynamic hover animation creates an engaging experience by flipping the image horizontally or vertically, resulting in an eye-catching, interactive effect.Appr 2 min read How to Zoom an Image on Mouse Hover using CSS? CSS plays a vital role in styling modern websites, with over 90% of sites using it for visual effects and responsive layouts. One popular effect is image zoom on hover, which enhances user experience and adds visual appeal. In this article, you’ll learn three simple ways to create image zoom effects 2 min read How to Change the Color of Link on Hover using CSS ? Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU 2 min read How to change color of PNG image using CSS? Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function. filter: none|blur()|brightness()|contrast()|drop-sh 1 min read Like