Image के ऊपर Text लाना (HTML + CSS)

# 🖼️ Image के ऊपर Text लाना (HTML + CSS)

यह उदाहरण बताता है कि HTML और CSS का उपयोग करके किसी इमेज के ऊपर टेक्स्ट कैसे लाया जाए।

## 📄 HTML कोड:

<div class="image-container">
  <img src="your-image.jpg" alt="Beautiful Image" />
  <div class="text-overlay">📘 यह एक संदेश है</div>
</div>

css code

.image-container {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 500px;
}

.image-container img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  background-color: rgba(0, 0, 0, 0.4);
  padding: 10px 20px;
  border-radius: 8px;
}

🧪 Output Preview:

आपको ऐसा दिखेगा:

• एक सुंदर इमेज

• उसके ऊपर सेंटर में टेक्स्ट मैसेज "📘 यह एक संदेश है"

📌 Notes:

• position: relative container पर होना जरूरी है ताकि उसका absolute टेक्स्ट अंदर position हो।

• आप top, left और transform से टेक्स्ट को बिल्कुल center में ला सकते हैं।