कैसे बनाएं: ओवरले प्रभाव

कैसे सीएसएस के द्वारा ओवरले प्रभाव बनाएं (एक ओवरले प्रभाव है)।

कैसे ओवरले प्रभाव बनाएं

पहला कदम - एचटीएमएल जोड़ें:

किसी भी एलीमेंट का उपयोग करें और उसे दस्तावेज़ के किसी भी स्थान पर रखें:

<div id="overlay"></div>

दूसरा कदम - सीएसएस जोड़ें:

ओवरले एलीमेंट के स्टाइल सेट करें:

#overlay {
  position: fixed; /* पृष्ठ सामग्री के ऊपर होता है */
  display: none; /* डिफ़ॉल्ट में छुपा हुआ */
  width: 100%; /* पूर्ण चौड़ाई (पृष्ठ को पूरी तरह से कवर करना) */
  height: 100%; /* पूर्ण ऊंचाई (पृष्ठ को पूरी तरह से कवर करना) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* पारदर्शी श्वेत पृष्ठभूमि */
  z-index: 2; /* अगर आप अन्य एलीमेंटों के लिए अलग क्रम इस्तेमाल करते हैं, तो स्टेकिंग ऑर्डर निर्धारित करें */
  cursor: pointer; /* हॉवर के दौरान माउस कंडक्टर जोड़ें */
}

तीसरा कदम - जेसकैप जोड़ें:

जेसकैप द्वारा ओवरले प्रभाव को खोलने और बंद करने का उपयोग करें:

function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}

स्वयं आज़माएं

पाठ वाले ओवरले का प्रभाव

किसी ओवरले पर किसी भी आप चाहते हैं को जोड़ें और उसे आप चाहते हैं के स्थान पर रखें। इस उदाहरण में, हमने पृष्ठ के मध्य में पाठ जोड़ा है:

उदाहरण

<style>
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
  <div id="text">Overlay Text</div>
</div>

स्वयं आज़माएं