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.