How to Add Shadow Effect on Hover to DIV Boxes in CSS ?
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.
Table of Content
- Using box-shadow Property
- Using filter Property with drop-shadow
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.
Contact Us