How to Add Visual Effects to Images using CSS? Last Updated : 28 May, 2024 Comments Improve Suggest changes Like Article Like Report CSS is most useful for adding visual effects to images, enhancing the overall user experience. By using CSS properties like filter, transform, and transition, you can create dynamic and engaging effects that respond to user interactions. In this article, we will explore examples showcasing the visual effects of images using CSS. These are the following methods: Table of Content Applying CSS Filter EffectsApplying CSS Transform and Transition EffectsApplying CSS Filter EffectsWe have applied the filter property in CSS to create visual effects on the image, such as grayscale, blur, and brightness, which activate on hover. Example: The below example uses CSS Filter Effects to add visual effects to images using CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <style> body { font-family: Arial, sans-serif; text-align: center; margin: 20px; } h1 { color: green; } .image-container img { width: 300px; transition: 0.5s; } .image-container img:hover { filter: grayscale(100%) blur(2px) brightness(1.2); } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>Applying CSS Filter Effects</h3> <div class="image-container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240305215328/gfglogo.png" alt="GeeksforGeeks Logo"> </div> </body> </html> Output: Applying CSS Transform and Transition EffectsWe have applied the transform property in CSS to scale and rotate the image on hover, combined with the transition property to ensure smooth animations. Example: The below example uses CSS Transform and Transition effects to add visual effects to images using CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <style> body { font-family: Arial, sans-serif; text-align: center; margin: 20px; } h1 { color: green; } .image-container img { width: 300px; transition: transform 0.5s; } .image-container img:hover { transform: scale(1.2) rotate(10deg); } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3>Applying CSS Transform and Transition Effects</h3> <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 Visual Effects to Images using CSS? A anjalibo6rb0 Follow Improve Article Tags : Web Technologies CSS Similar Reads How To Add Blur Effects to Images in CSS ? Adding blur effects to the images in web applications enhances the visual appearance of the content. We can add blur effects using various CSS properties. Below are the approaches to add blur effects to images in CSS: Table of Content Using CSS filter propertyUsing backdrop-filter PropertyUsing CSS 2 min read How to add image refaction using CSS ? This article will show how to add image reflection using CSS. To achieve this task, you can use the -webkit-box-reflect to add the reflection of any HTML element. The box-reflect property is a CSS property that allows you to create a reflection effect for an element. It is primarily used to add a mi 2 min read How to Add Onclick Effect using CSS ? In this article, we will see how to add onclick effect using CSS. To add the onclick effect using CSS, we can use :active pseudo selector. When an element is clicked, the onclick JavaScript event is launched. JavaScript is required to add an event listener to the HTML element and then run some code 2 min read How to add a mask to an image using CSS ? The mask-image property in CSS is used to set the mask of an image or text. CSS masking is used to form a mask layer for a particular element. You can add a mask to an image using the mask-image property in CSS. In this article, you will get to know the different property values of mask-image proper 2 min read How to Add Filter Effects to Images ? Adding filter effects to images can make images more enhanced on your website. Filter effects can be started from simple adjustments like brightness and contrast to more complex effects like blur, color overlays, and many more. The below approaches can be used to add filter effect to images: Table o 4 min read Like