Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 while your cursor is over various images. We are going to process same in this article. Such images could serve as a cards for our website.
The task we are going to perform in this article was to apply glowing effect to the image using HTML and CSS. The task can be accomplished by using the box-shadow property. let's dive into the article to learn more about applying the glowing effect.
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.
Syntax
Following is the syntax for the box-shadow property
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
For getting more idea on applying the glowing effect to the image using HTML and CSS, let's look into the following examples.
Example
In the following example, we are going to upload the image from the local host and apply effects to it by using the box-shadow property.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: 300px;
height: 150px;
margin-left: 60px;
border-radius: 10%;
}
.tutorial:hover {
box-shadow: 0 0 100px #00FF00;
}
</style>
</head>
<body>
<div class="container">
<img class="tutorial" src="https://www.tutorialspoint.com/images/logo.png" alt="LOGO" />
</div>
</body>
</html>
When the above code gets executed, it will generate an output consisting of the image on the webpage. When the user places the cursor on the image, it displays the effect on the borders of the image.
Example
Consider the following example, where we are going to mention the box-shadow property with a negative spread radius.
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background-color: #E5E8E8;
height: 40px;
width: 100px;
padding: 30px;
}
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' />
</div>
</body>
</html>
On running the above code, the output window will pop up, displaying the image on the webpage and showing an effect on one edge of the image caused by the negative spread radius.
Example
Let's look at the following example, where we are going to apply an effect inside the image that we are going to use with the help of "inset".
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: 350px;
height: 250px;
margin-left: 60px;
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">
</div>
</body>
</html>
When the above code gets executed, it will generate the output displaying the image along with the applied inner shadow effects on the webpage.
Example
Following is the example where we are going to turn the image effect off when placing the cursor on the image.
<!DOCTYPE html>
<html>
<head>
<style>
.image {
width: 800px;
height: 200px;
margin: 5px;
position: relative;
box-shadow: 0px 0px 10px (#52BE80, 80%);
background-size: cover !important;
&::after {
width: 100%;
height: 100%;
border-radius: 50px;
position: absolute;
content: '';
background: inherit;
}
&:hover::after {
transform: scale(0.5);
opacity: 0;
}
}
.image:nth-of-type(1) {
background: url('https://www.tutorialspoint.com/images/logo.png')
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
On running the above program, the output window will pop up, displaying the image uploaded on the webpage, which looks darker. When the user tries to place the cursor on the image, it will lose its effects and look like a normal thing.
506 Views
