छवि पर माउस होवर करते समय div या span तत्व को छवि पर प्रकट होने की अनुमति देने के लिए, यह .image:hover overlay,
की सहायता से किया जा सकता हैमूल तत्व के बिल्कुल सापेक्ष .ओवरले तत्व की स्थिति के लिए हम सभी छवि आकारों के लिए ऊंचाई और चौड़ाई 100% देते हैं जिससे मूल तत्व इनलाइन-ब्लॉक हो जाता है
एचटीएमएल
सीएसएस
डिफ़ॉल्ट रूप से .overlay तत्व को छुपाकर, हम होवर पर स्टाइल बदलने के लिए चयनकर्ता .image:hover .overlay का उपयोग करते हैं। एचटीएमएल संरचना के कारण, यह अच्छी तरह से काम करता है क्योंकि .ओवरले एक वंशज तत्व है..छवि { स्थिति:सापेक्ष; डिस्प्ले:इनलाइन-ब्लॉक;}। ओवरले {डिस्प्ले:कोई नहीं;}। छवि:होवर। ओवरले {चौड़ाई:100%; ऊंचाई:100%; पृष्ठभूमि:आरजीबीए (0,0,0,.5); स्थिति:पूर्ण; शीर्ष:0; बाएं:0; प्रदर्शन:इनलाइन-ब्लॉक; -वेबकिट-बॉक्स-साइज़िंग:बॉर्डर-बॉक्स; -मोज़-बॉक्स-साइज़िंग:बॉर्डर-बॉक्स; बॉक्स-आकार:सीमा-बॉक्स; /* अन्य सभी स्टाइल - उदाहरण देखें */ img { लंबवत-संरेखण:शीर्ष; }}