:hover प्सूडो-क्लास और opacity प्रॉपर्टी से इमेज पर माउस लाने पर पारदर्शिता बदलें। transition से स्मूथ एनिमेशन जोड़ें।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.transparent {
width: 270px; height: 200px; opacity: 1; transition: 0.3s;
}
.transparent:hover { opacity: 0.3; }
</style>
</head>
<body>
<h1>Image opacity on hover example</h1>
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
<h2>Hover over the above image to change its opacity</h2>
</body>
</html>
आउटपुट
उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:
मुख्य बिंदु
- opacity: 1 → 0.3 - पूर्ण अपारदर्शी से 30% अपारदर्शी
- transition: 0.3s - 0.3 सेकंड में स्मूथ परिवर्तन
- :hover प्सूडो-क्लास - माउस एंटर पर ट्रिगर
- इमेज पर सीधे - किसी रैपर की आवश्यकता नहीं
- उपयोग मामला - गैलरी, कार्ड, इंटरएक्टिव इमेज
