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.
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
Contact Us