Apply Glowing Effect to the Image using HTML and CSS Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report While surfing most of the websites you have seen some special effects which can be seen on various images while putting your cursor over them. So, in this article, we are going to implement the same. We can use such images as a card for our website. In this article, you’re going to learn how to apply the glowing effect to a particular image, when you put a cursor over it you will see that effect. We will implement it by using HTML and CSS. A sample video is provided to understand more clearly what you are going to develop in this article. Preview: Approach:First create a heading and container after that wrap the image inside a container div to help organize the layout. Center-align the heading text using inline CSS with a green color and text-align set to center.Apply a box-shadow property with a green-yellow color to create the glowing effect when the image is hovered.Create a CSS style for the image (`GFG`) with a specific width, height, and border radius.Use the `:hover` pseudo-class to apply changes when the image is hovered, such as changing the text color and background color.Example: In this example we will see how to apply glowing effect to the image using HTML and CSS . HTML <!DOCTYPE html> <html> <head> <style> .GFG { width: 200px; height: 250px; margin-left: 400px; border-radius: 10%; } .GFG:hover { color: #111; background: greenyellow; box-shadow: 0 0 100px greenyellow; } </style> </head> <body> <h1 style="color: green; text-align: center;"> GeeksForGeeks Glowling Card </h1> <div class="container"> <img class="GFG" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo.png" alt="GeeksForGeeks" /> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to make photo sliding effect using HTML and CSS ? R riyamathur Follow Improve Article Tags : Technical Scripter Web Technologies Web Templates Technical Scripter 2020 Similar Reads How to create Image Folding Effect using HTML and CSS? In this article, we are going to create an image folding effect below the main image. This is a simple project, we can achieve our target only by using HTML and CSS. Approach: Create the main div in which we are creating 4 list tags.Use of nth-child() selector property to give different styles to di 2 min read How to create a Spotlight Effect using HTML and CSS ? In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect.HTML Section: In this section, we will create a container elements for the background image and 4 min read How to make photo sliding effect using HTML and CSS ? It is an easy and amazing animation effect created with HTML and CSS, where the photos are moving horizontally one by one like a roller. When the mouse pointer comes upon the photo then the specific photo stops moving.Approach: The basic idea of these animation comes from the hover effect of CSS ani 4 min read How to create reflection effect using HTML and CSS ? The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we t 3 min read How to Create Engraved Text Effect using HTML and CSS ? The engraved text effect is an effect that you can use in your websites as a heading or a sub-heading to make it look more pleasing and attractive. Approach: The engraved text effect can be easily generated using HTML and CSS. First we will create a basic text using HTML and then by using the CSS te 2 min read Create a Gradient Text Effect using HTML and CSS This article will show the approach to add a gradient effect on text using the background-clip CSS property. The final output of text using this effect is shown below. The CSS properties that would be used are flexbox, background-clip, and -webkit-background-clip and the background. HTML Section: Th 3 min read Like