Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Apply Glowing Effect to the Image using HTML and CSS
You have probably seen several special effects while browsing the majority of websites, which may be viewed when your cursor is over various images. We are going to process same in this article. Such images could serve as cards for our website.
The task we are going to perform in this article is to apply a glowing effect to images using HTML and CSS. This effect can be accomplished by using the box-shadow property. Let's dive into the article to learn more about applying the glowing effect.
Syntax
selector {
box-shadow: none | h-offset v-offset blur spread color | inset | initial | inherit;
}
Using box-shadow Property
The box-shadow property allows you to cast a drop shadow from the frame of nearly any element. The box shadow adopts the same rounded edges if a border-radius is given on the element with the box shadow.
Example 1: Hover Glow Effect
In the following example, we are going to apply a glowing effect to an image on hover
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: 300px;
height: 150px;
margin: 20px;
border-radius: 10%;
transition: box-shadow 0.3s ease;
}
.tutorial:hover {
box-shadow: 0 0 30px #00FF00;
}
</style>
</head>
<body>
<div class="container">
<img class="tutorial" src="https://www.tutorialspoint.com/images/logo.png" alt="LOGO" />
</div>
</body>
</html>
An image appears with rounded corners. When you hover over it, a green glowing effect appears around the image borders.
Example 2: Shadow with Negative Spread
Consider the following example, where we are using the box-shadow property with a negative spread radius
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background-color: #E5E8E8;
height: 40px;
width: 100px;
padding: 30px;
margin: 20px;
}
img {
border-radius: 15%;
width: 120px;
box-shadow: 0 8px 6px -2px #8E44AD;
}
</style>
</head>
<body>
<div id='tutorial'>
<img src='https://www.tutorialspoint.com/images/logo.png' alt="Logo" />
</div>
</body>
</html>
An image with a purple shadow effect appears on the bottom edge only, due to the negative spread radius creating a more focused shadow.
Example 3: Inner Glow Effect
Let's look at the following example, where we apply an inner glowing effect using the inset keyword
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: 350px;
height: 250px;
margin: 20px;
border-radius: 10%;
box-shadow: inset 0 0 60px #85C1E9;
}
</style>
</head>
<body>
<div>
<img class="tutorial" src="https://www.tutorialspoint.com/images/logo.png" alt="Logo">
</div>
</body>
</html>
An image appears with a blue inner glow effect, creating a soft light emanating from within the image borders.
Example 4: Multiple Shadow Effects
The following example demonstrates multiple shadow effects for a more dramatic glow
<!DOCTYPE html>
<html>
<head>
<style>
.glow-image {
width: 300px;
height: 200px;
margin: 50px auto;
display: block;
border-radius: 15px;
box-shadow:
0 0 20px #ff6b6b,
0 0 40px #ff6b6b,
0 0 60px #ff6b6b;
transition: all 0.3s ease;
}
.glow-image:hover {
box-shadow:
0 0 30px #ff6b6b,
0 0 60px #ff6b6b,
0 0 90px #ff6b6b;
}
</style>
</head>
<body>
<img class="glow-image" src="https://www.tutorialspoint.com/images/logo.png" alt="Glowing Logo">
</body>
</html>
An image with a red multi-layered glow effect appears. On hover, the glow becomes more intense and extends further from the image.
Conclusion
The box-shadow property is a powerful tool for creating glowing effects on images. You can use different values, spread radii, and the inset keyword to achieve various visual effects. Combining multiple shadows creates more dramatic and appealing glow effects for your web designs.
1K+ Views
