How to Add Shadow Effect on Hover to DIV Boxes in CSS ?
Last Updated :
29 Feb, 2024
Adding a shadow effect on hover to DIV boxes is a popular technique to enhance the visual appeal and interactivity of a website. In this article, we will explore two different methods to achieve this effect using CSS.
Add Shadow Effect on Hover to DIV Box using box-shadow Property
The CSS box-shadow property is used to add shadow effects around an element’s frame. You can specify the horizontal and vertical offsets, blur radius, spread radius, and color of the shadow.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Shadow Effect on Hover</ title >
< style >
.box {
width: 200px;
height: 200px;
background-color: #4CAF50;
transition: box-shadow 0.3s ease;
}
.box:hover {
box-shadow: 10px 10px 20px rgba(36, 36, 36, 0.5);
}
</ style >
</ head >
< body >
< div class = "box" ></ div >
</ body >
</ html >
|
Output
Explanation:
- The .box class styles the DIV box with a specific width, height, and background color.
- The transition property is used to animate the change in box-shadow smoothly.
- On hover, the box-shadow property adds a shadow effect with 10px horizontal and vertical offsets, a 20px blur radius, and a semi-transparent black color.
Add Shadow Effect on Hover to DIV Boxes using filter Property with drop-shadow
The filter property in CSS allows you to apply graphical effects like blurring or color shifting to an element. The drop-shadow function creates a shadow effect similar to box-shadow, but it can be applied to transparent images as well.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Shadow Effect on Hover with Filter</ title >
< style >
.box {
width: 200px;
height: 200px;
background-color: #4CAF50;
transition: filter 0.3s ease;
}
.box:hover {
filter: drop-shadow(10px 10px 20px rgba(36, 36, 36, 0.5));
}
</ style >
</ head >
< body >
< div class = "box" ></ div >
</ body >
</ html >
|
Output
Explanation:
- The setup is similar to the first method, but instead of using the box-shadow property, we use the filter property with the drop-shadow function.
- On hover, the filter property applies a drop shadow effect with the same parameters as before.
Share your thoughts in the comments
Please Login to comment...