बेसिक CSS ओवरले बनाएं: HTML और CSS से इमेज होवर इफेक्ट

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

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

इस गाइड में, हम बेसिक HTML और CSS (कोई जावास्क्रिप्ट नहीं) का उपयोग करके इमेज पर होवर करने पर ओवरले इफेक्ट प्राप्त करने पर ध्यान केंद्रित करेंगे।

HTML संरचना तैयार करें

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

<div class="container">
  <div class="overlay-outer">
    <img class="item-to-overlay" src="image.jpg" alt="हमारी इमेज" />
    <div class="overlay-inner">
      यह हमारा ओवरले डिव है।
    </div>
  </div>
</div>

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

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

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

स्टेप-बाय-स्टेप CSS स्टाइलिंग

1. Body स्टाइलिंग

body {
  background-color: gray;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

2. .container

div.container { width: 100%; }

3. .overlay-outer (महत्वपूर्ण: position: relative)

div.overlay-outer {
  width: 50%;
  height: 400px;
  position: relative; /* यह "फेंस" स्थापित करता है */
}

4. इमेज स्टाइलिंग

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

.item-to-overlay {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

5. .overlay-inner (महत्वपूर्ण: position: absolute)

.overlay-inner {
  background-color: #9c1203;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute; /* relative पैरेंट के सापेक्ष पोजिशन */
  padding: 0;
}

6. ओवरले कंटेंट स्टाइलिंग

.overlay-inner p {
  color: #fff;
  line-height: 150px;
  font-family: 'arial';
  padding: 20px;
  text-align: left;
}

7. होवर इफेक्ट

.overlay-outer:hover .overlay-inner {
  opacity: .8;
  transition: opacity .5s;
}

0 और 1 के बीच opacity सेट करने से इनर ओवरले डिव को दिए गए बैकग्राउंड रंग को पारभासी होने की अनुमति मिलती है। ट्रांजिशन प्रॉपर्टी इसे opacity 0 से opacity 0.8 तक एक स्मूथ ट्रांजिशन बनाती है।

पूर्ण कार्यशील उदाहरण

<style>
  * { box-sizing: border-box; }
  body { background: grey; max-width: 800px; height: 1000px; }
  .outside {
    width: 75%; height: 400px;
    display: inline-block; position: relative; cursor: pointer;
  }
  .images { width: 100%; height: 400px; object-fit: cover; border: 5px double black; }
  .inside {
    background-color: #9c1203; height: 100%; width: 100%;
    opacity: 0; top: 0; left: 0; position: absolute; padding: 0;
  }
  .inside p { color: #fff; line-height: 150px; font-family: 'arial'; padding: 20px; text-align: left; }
  .outside:hover .inside { opacity: .8; transition: opacity .5s; }
</style>

<div class="container">
  <h1>CSS Overlay</h1>
  <div class="outside">
    <img class="images" src="image.jpg" alt="हमारी इमेज" />
    <div class="inside"><p>यह एक ओवरले है!</p></div>
  </div>
</div>

निष्कर्ष

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

इस लेख में, हमने यह भी सीखा कि अपनी समस्या को कैसे अप्रोच करें, अपने HTML को कैसे ब्लॉक करें और फिर अपने ओवरले इफेक्ट के लिए CSS को कैसे स्टाइल करें। ऊपर दिए गए कोड एडिटर में कवर किए गए बिंदुओं का एक कार्यशील उदाहरण है - इसके साथ खेलने के लिए समय निकालें और देखें कि क्या आप इस ओवरले का अपना संस्करण बना सकते हैं।