Apply Glowing Effect to the Image using HTML and CSS
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 glowing effect to a particular image, when you put 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.
Step By Step Implementation
Step 1: HTML code for Image:
HTML
<!-- Give a suitable heading using h1 tag--><h1 style="color: green; text-align: center;"> GeeksForGeeks Glowling Card</h1><div class="container"> <!-- Set a image a background named gfg.jpg present in images folder --> <img class="GFG" src="images/gfg.jpg" alt="GeeksForGeeks" /></div> |
Step 2: Styling the image using CSS:
Now, we will apply some CSS properties to decorate the image and also fix it’s position on webpage. The key is to use the box-shadow property of CSS to glow the image when user put cursor on image. Here is the internal CSS code given to you for help.
HTML
<style> .GFG{ width:200px ; height:250px; margin-left: 550px; border-radius: 10%;}.GFG:hover{ color: #111; background: greenyellow; box-shadow: 0 0 100px greenyellow; }</style> |
Example:
This example uses box-shadow property to apply glowing effect to the image. You can change the background glowing color according to you.
HTML
<!DOCTYPE html><html> <head> <style> .GFG { width: 200px; height: 250px; margin-left: 550px; border-radius: 10%; } .GFG:hover { color: #111; background: greenyellow; box-shadow: 0 0 100px greenyellow; } </style></head> <body> <!-- Give a suitable heading using h1 tag--> <h1 style="color: green; text-align: center;"> GeeksForGeeks Glowling Card </h1> <div class="container"> <!-- Set a image a background named gfg.jpg present in images folder --> <img class="GFG" src="images/gfg.jpg" alt="GeeksForGeeks" /> </div> </body> </html> |
that’s all for this article. Here is the output video of above code.
Output:
Please Login to comment...