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=
alt="GeeksForGeeks" />
</div>
</body>
</html>
|
Output: