CSS box-shadow प्रॉपर्टी का उपयोग करके इमेज (या किसी भी तत्व) पर छाया प्रभाव जोड़ा जा सकता है। :hover स्यूडो-क्लास के साथ संयोजन करके होवर पर छाया दिखाई जा सकती है।
उदाहरण
नीचे दिए गए उदाहरण में, इमेज पर होवर करने पर नीली छाया (box-shadow: 0 0 2px 2px blue) दिखाई देती है।
<!DOCTYPE html>
<html>
<head>
<style>
img {
border: 2px solid orange;
border-radius: 3px;
padding: 7px;
}
img:hover {
box-shadow: 0 0 2px 2px blue;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
</body>
</html>
box-shadow सिंटैक्स: box-shadow: h-offset v-offset blur-radius spread-radius color;
0 0: कोई ऑफसेट नहीं (केंद्रित छाया)2px: ब्लर त्रिज्या2px: स्प्रेड त्रिज्या (छाया का आकार बढ़ाता है)blue: छाया का रंग
टिप: transition: box-shadow 0.3s जोड़कर छाया को सहजता से प्रकट/छिपा सकते हैं।
