एक ओवरले एक वेबसाइट पर इस्तेमाल किया जाने वाला प्रभाव है जो उपयोगकर्ताओं को अगली कार्रवाई की सही दिशा में चलाने के लिए उपयोग करता है जो उन्हें करना चाहिए। सही उपयोग में सकारात्मक उपयोगकर्ता अनुभव बनाने की क्षमता होती है, जो उपयोगकर्ताओं को आपकी वेबसाइट पर बनाए रखेगा।

ओवरले बनाने के कई तरीके हैं। कोई भी सही तरीका नहीं है - यह आपकी साइट के लिए सबसे अच्छा काम करने वाला तरीका चुनने के बारे में है और आपको क्या चाहिए।

इस गाइड में, हम मूल HTML और CSS (कोई जावास्क्रिप्ट नहीं) का उपयोग करने पर ध्यान केंद्रित करेंगे ताकि आप किसी छवि पर मँडराते समय जिस ओवरले प्रभाव की तलाश कर रहे हैं उसे प्राप्त कर सकें।

अपना HTML ब्लॉक करें

आइए अपना HTML बॉयलरप्लेट बनाएं जिसका उपयोग हमारी छवि ओवरले बनाने के लिए किया जाएगा:

   

 
समस्या को समझें
 

 पहली बार कुछ नया करने का प्रयास करते समय, आपको वापस बैठकर सोचना चाहिए कि किसी खोज इंजन से परामर्श करने से पहले समस्या को कैसे हल किया जाना चाहिए। जब आपको इस बात की ठोस समझ हो कि ओवरले कैसे काम करता है और हमें क्या करने की आवश्यकता है, तो आपको जरूरत पड़ने पर संकेतों और युक्तियों को देखने का सौभाग्य प्राप्त होगा। 
 
 

 एक पुनर्कथन के रूप में, एक ओवरले एक कंटेनर (हमारे उदाहरण में, एक छवि) के ऊपर जाता है और जब हम उस पर होवर करते हैं तो छवि के लिए कुछ करता है। यह उपयोगकर्ता को साइट के साथ बातचीत करने के लिए निर्देशित करता है। 
 
 

 आगे बढ़ते हुए, बड़ी तस्वीर के बारे में सोचें - यह कैसे करना है, इसके बारे में सभी मिनट के विवरण डालने का प्रयास न करें। हमारे पास एक इमेज है और हमारे पास एक ओवरले है - यानी कम से कम दो कंटेनर। और उन दो कंटेनरों को एक बड़े कंटेनर में होना चाहिए। 
 
 

 अभी तक कुछ भी स्टाइल करने की कोशिश न करें - पूरी तरह से HTML पर काम करें और इसे कोड करें। नीचे दिए गए मार्कअप पर एक नज़र डालने से पहले देखें कि क्या आप इसे स्वयं ब्लॉक कर सकते हैं:
 

 81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
 

 बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
 
    
 
 यह हमारा ओवरले डिव है।
 

 

 एक बार जब हम मुख्य ब्लॉकों का पता लगा लेते हैं, तो हम स्टाइल पर काम कर सकते हैं। मुझे बाहरी/बड़े कंटेनरों से शुरू करना और छोटे कंटेनरों में अपना काम करना पसंद है। यह कंटेनर की वास्तविक चौड़ाई का ट्रैक रखने में मदद करता है। आप पाएंगे कि आप अंदर से शुरू करना और अपने तरीके से काम करना पसंद करते हैं - यह भी बिल्कुल ठीक है। मेरे साथ नीचे का अनुसरण करें।
 
शरीर 
 

 बाहर से शुरू करते हुए और अपने तरीके से काम करते हुए, हम सबसे पहले बॉडी टैग पर आते हैं - यह पेज का सबसे बड़ा कंटेनर है और हमारे पेज को होल्ड करता है। यहां आप पृष्ठभूमि का रंग, मार्जिन और एप्लिकेशन की चौड़ाई और अधिकतम-चौड़ाई सेट कर सकते हैं:
 
 
 
Div.overlay-outer 
 

 जैसे ही हम मार्कअप में गोता लगाते हैं, अगला <div>  हम class=”overlay-outer” . के साथ आते हैं . यहीं से हमें अपने ओवरले की स्टाइलिंग के बारे में सोचना शुरू करना होगा। 
 
 

 पहली चीज़ जो हमें करने की ज़रूरत है वह है उस कंटेनर के लिए परिभाषाएँ बनाना जिसमें छवि और ओवरले होगा। वेबपेज की चौड़ाई का कितना हिस्सा हम चाहते हैं कि हमारा ओवरले कंटेनर लगे? ऊंचाई के बारे में क्या? यह <div> भी है जहां हमें अपनी छवि के लिए अपनी "बाड़" स्थापित करने की आवश्यकता है। इसलिए हमें तत्व में स्थिति गुण जोड़ने की आवश्यकता है:
 
 
 

 सीएसएस ओवरले सीएसएस में अब तक सीखी गई बहुत सी चीजों को जोड़ती है:पोजिशनिंग, बैकग्राउंड-कलर, अपारदर्शिता, ऑब्जेक्ट-फिट और डिव। बाहरी ओवरले कंटेनर को स्टाइल करने के बाद, हमें छवि और आंतरिक ओवरले कंटेनर पर एक नज़र डालने की आवश्यकता है। 
 
 
आईएमजी 
 

 छवि तत्व को उस कंटेनर की चौड़ाई और ऊंचाई से मेल खाना चाहिए जिसमें वह बैठता है। यदि आप चाहें तो यह सीमा लगाने और अपनी छवि को क्रॉप करने का स्थान भी है। 
 
डिव.ओवरले-इनर 
 

 आंतरिक ओवरले <div>  और इसकी शैलियों का संबंध ओवरले के वास्तविक स्वरूप से है। यह वह जगह है जहां आप अपने ओवरले के लिए अपनी पृष्ठभूमि का रंग चुनेंगे, अस्पष्टता को 0 पर सेट करें। सबसे महत्वपूर्ण बात यह है कि हमें एक position: absolute,  top:  0 and left: 0 जोड़ने की आवश्यकता है। ताकि ओवरले-इनर डिव स्वयं <div>  . पर स्थित हो जाए वह स्थिति पर सेट है:सापेक्ष। 
 
डिव.ओवरले-इनर पी 
 

 यहां हम ओवरले कंटेनर की वास्तविक सामग्री को स्टाइल करते हैं। 
 
Div.overlay-outer:hover .overlay-inner
 

 अंत में, हम अपने बाहरी ओवरले कंटेनर पर एक :hover छद्म वर्ग डालने जा रहे हैं ताकि जब हम उस पर माउस ले जाएं तो ओवरले दिखाई दे:
 
 
.outside:hover .inside { अस्पष्टता:.8; संक्रमण:अस्पष्टता .5s;}
 

 0 और 1 के बीच अस्पष्टता सेट करने से आंतरिक ओवरले div को निर्दिष्ट पृष्ठभूमि-रंग पारभासी होने की अनुमति मिलती है। ट्रांज़िशन प्रॉपर्टी इसे अस्पष्टता 0 से अस्पष्टता 8 तक एक सहज संक्रमण बनाती है। 
 
 

 अब आपने सफलतापूर्वक एक CSS ओवरले बना लिया है। बधाई हो! 
 
 

 CSS और HTML का उपयोग करना उन कई तरीकों में से एक है जिनसे आप किसी तत्व के लिए ओवरले बना सकते हैं। इस समाधान के लिए, हमने सहायता के लिए सीएसएस से कई गुणों का उपयोग किया:संक्रमण, स्थिति, वस्तु-फिट, चौड़ाई, ऊंचाई और बहुत कुछ। 
 
 

 इस लेख में, हमने यह भी सीखा कि अपनी समस्या से कैसे निपटा जाए, अपने HTML को कैसे ब्लॉक किया जाए और फिर हमारे ओवरले प्रभाव के लिए CSS को कैसे स्टाइल किया जाए। नीचे दिए गए कोड संपादक में यहां शामिल बिंदुओं का एक कार्यशील उदाहरण है:
 
 
 <शैली> * { बॉक्स-साइज़िंग:बॉर्डर-बॉक्स;}बॉडी { बैकग्राउंड:ग्रे; अधिकतम-चौड़ाई:800px; ऊंचाई:1000px;}। बाहर {चौड़ाई:75%; ऊंचाई:400 पीएक्स; प्रदर्शन:इनलाइन-ब्लॉक; स्थिति:रिश्तेदार; कर्सर:सूचक;}। छवियां {चौड़ाई:100%; ऊंचाई:400 पीएक्स; ऑब्जेक्ट-फिट:कवर; बॉर्डर:5px डबल ब्लैक;}.इनसाइड { बैकग्राउंड-कलर:#9c1203; ऊंचाई:100%; चौड़ाई:100%; अस्पष्टता:0; शीर्ष:0; बाएं:0; स्थिति:निरपेक्ष; पैडिंग:0;}। पी के अंदर {रंग:#fff; लाइन-ऊंचाई:150px; फ़ॉन्ट-परिवार:'एरियल'; पैडिंग:20 पीएक्स; टेक्स्ट-एलाइन:लेफ्ट;}.आउटसाइड:होवर .इनसाइड {अस्पष्टता:.8; संक्रमण:अस्पष्टता .5s;} 
 
CSS Overlay
 
 alt="this-is-our-image " />
 

यह एक ओवरले है!

 

 

 मार्कअप के साथ खेलने के लिए समय निकालें यह देखने के लिए कि क्या आप इस ओवरले का अपना संस्करण बना सकते हैं।