CSS में इमेज होवर इफेक्ट कैसे बनाएं

आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

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

आप अपनी छवियों पर एनीमेशन की विभिन्न शैलियाँ बना सकते हैं। इनमें बैकग्राउंड को ब्लर या जूम करना, टेक्स्ट को फेड या स्लाइड करना और बैकग्राउंड का रंग बदलना शामिल है।

---

---

दिन का वीडियो सामग्री के साथ जारी रखने के लिए स्क्रॉल करें

के लिए HTML बना रहा है

एक बनाकर प्रारंभ करें index.html अपने कंप्यूटर पर एक खाली फ़ोल्डर के अंदर फाइल करें, फिर टेक्स्ट एडिटर के साथ फाइल खोलें। फ़ाइल के अंदर, HTML कंकाल बनाएं और ओपनिंग बॉडी और क्लोजिंग बॉडी टैग के अंदर निम्नलिखित मार्कअप जोड़ें:

 <div class="grid"> 
  <div class="image-wrapper"> 
    <img class="blur" src="https://picsum.photos/500?random=1" alt=""> 
 
    <div class="content fade"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="zoom blur" src="https://picsum.photos/500?random=2" alt=""> 
 
    <div class="content fade"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="blur" src="https://picsum.photos/500?random=3" alt=""> 
 
    <div class="content slide-left"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="grey" src="https://picsum.photos/500?random=3" alt=""> 
 
    <div class="content slide-left"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
</div> 

यह एक ग्रिड कंटेनर है जिसमें चार इमेज रैपर हैं। के साथ div तत्व छवि-आवरण वर्ग छवि और उसके संबंधित पाठ के लिए एक आवरण के रूप में कार्य करता है। प्रत्येक अनुभाग की छवि और सामग्री में कक्षाओं का एक अनूठा सेट जोड़ा गया है।

स्टाइल शीट के अंदर, आप करेंगे इन तत्वों को उनके वर्ग नामों से लक्षित करें और विभिन्न स्टाइलिंग और एनीमेशन प्रभाव लागू करें। पाठ डिफ़ॉल्ट रूप से नहीं दिखाया जाएगा; आप इसे केवल तभी दिखाएंगे जब आप इमेज रैपर पर होवर करेंगे, और इस प्रक्रिया में इमेज पर अलग-अलग प्रभाव पड़ेंगे।

बेसिक सीएसएस जोड़ना

अब जब आपने HTML बना लिया है, तो इसे CSS के साथ स्टाइल करने का समय आ गया है। एक बनाने के शैली.सीएसएस फ़ाइल और अपनी HTML फ़ाइल से इस स्टाइल शीट से लिंक करें <सिर> अनुभाग:

 <link rel="stylesheet" href="style.css">

अपने अंदर शैली.सीएसएस फ़ाइल, पहली चीज़ जो आपको करने की ज़रूरत है वह मार्जिन को शून्य पर रीसेट करना है और कुछ निचला मार्जिन सेट करना है:

---

---

स्माइली फेस $ का क्या मतलब है

 body { 
  margin: 0; 
  margin-bottom: 20rem; 
}

अगला, आपको सबसे बाहरी कंटेनर को एक में बदलना होगा सीएसएस ग्रिड जिसका उपयोग आप तत्वों को दो आयामों में करने के लिए कर सकते हैं . निम्नलिखित कोड फिट होने वाले कई कॉलम या पंक्तियों के साथ एक ग्रिड बनाता है। प्रत्येक स्तंभ का न्यूनतम आकार 300px है और अधिकतम आकार कंटेनर का 1 अंश है:

 .grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

चूंकि आप टेक्स्ट को उसके कंटेनर से संबंधित स्थिति में रखना चाहते हैं, इसलिए आपको छवि रैपर से संबंधित स्थिति सेट करने की आवश्यकता है:

---

---

 .image-wrapper { 
  position: relative; 
  overflow: hidden; 
} 

अगला कदम छवि को स्टाइल करना है। छवि को एक ब्लॉक तत्व के रूप में प्रदर्शित करें, इसे पूरे कंटेनर की चौड़ाई में फैलाएं, और इसे इसके कंटेनर के केंद्र में फिट करें:

 .image-wrapper > img { 
  display: block; 
  width: 100%; 
  aspect-ratio: 1 / 1; 
  object-fit: cover; 
  object-position: center; 
} 

पाठ के लिए, इसे केंद्रीय रूप से स्थित करें और एक पारदर्शी, हल्के भूरे रंग की पृष्ठभूमि का रंग दें:

अपने आईपैड पर मूवी कैसे डाउनलोड करें

 .image-wrapper > .content { 
  position: absolute; 
  inset: 0; 
  font-size: 2rem; 
  padding: 1rem; 
  background: rgba(255, 255, 255, .4); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

CSS फ़ाइल को सहेजें और खोलें index.html आपके ब्राउज़र में। आपको नीचे दी गई छवि के समान एक पृष्ठ मिलना चाहिए।

संक्रमण को चालू और टेक्स्ट सेट करना

अब जब आपने छवियों पर मूल शैलियाँ लागू कर दी हैं, तो अगला कदम उनमें कुछ एनीमेशन जोड़ना है। छवियों और उनके संबंधित पाठ दोनों में एक संक्रमण जोड़कर प्रारंभ करें:

 .image-wrapper > img, 
.image-wrapper > .content { 
  transition: 200ms ease-in-out; 
} 

इसका मतलब यह है कि सभी संक्रमण प्रभाव (यानी फ़ेड-इन, ज़ूम और ब्लर) 200 मिलीसेकंड तक रहेंगे और उनका समय वक्र समान होगा।

फ़ेड-इन और ब्लर एनिमेशन

पाठ में पहली एनीमेशन शैली लुप्त होती है। जब आप किसी विशेष इमेज रैपर पर होवर करते हैं, तो वह सामग्री जिसमें हल्का होना क्लास का यह प्रभाव होगा (फीका-इन और फीका-आउट एनीमेशन) उस पर लागू होगा। आप अपारदर्शिता को शून्य पर सेट करके और इसे एक में बदलकर प्राप्त करते हैं जब माउस किसी विशेष छवि आवरण पर होवर करता है:

 .image-wrapper > .content.fade { 
  opacity: 0; 
} 
 
.image-wrapper:hover > .content.fade { 
  opacity: 1; 
} 

यदि आप फ़ाइल को सहेजते हैं और अपने ब्राउज़र की जांच करते हैं, तो आप फ़ेड-इन एनीमेशन को प्रभाव में देखेंगे। लेकिन आप यह भी देख सकते हैं कि पाठ पढ़ने में थोड़ा कठिन है (यदि छवि स्पष्ट है और बहुत अधिक विपरीत है)। याद रखें कि सभी छवियों का एक वर्ग नाम भी होता है कलंक . यह छवियों को उनके और पाठ के बीच कुछ आवश्यक कंट्रास्ट जोड़ने के लिए धुंधला करने के लिए है:

 image-wrapper:hover > img.blur { 
  filter: blur(5px) 
} 

अब जब आप छवि पर होवर करते हैं, तो आप देख सकते हैं कि यह बस धुंधली हो जाएगी। छवियों पर धुंधलापन अधिक स्पष्ट करने के लिए आप पिक्सेल मान बढ़ा सकते हैं, जिससे इसके और पाठ के बीच अधिक कंट्रास्ट जुड़ जाता है।

अन्य प्रभाव जोड़ना

अन्य प्रभाव पाठ को बाईं ओर से स्लाइड कर रहे हैं, छवि को ज़ूम कर रहे हैं, और छवि में ग्रेस्केल जोड़ रहे हैं। यहाँ तीनों प्रभावों को प्राप्त करने के लिए कोड है:

 .image-wrapper > .content.slide-left { 
    transform: translateX(100%) 
} 
 
.image-wrapper:hover > .content.slide-left { 
    transform: translateX(0%) 
} 
 
.image-wrapper:hover > img.grey { 
    filter: greyscale(1) 
} 
 
.image-wrapper:hover > img.blur { 
    filter: blur(5px) 
} 
 
.image-wrapper:hover > img.zoom { 
    transform: scale(1.1) 
} 

फ़ाइल सहेजें, फिर अपने ब्राउज़र पर जाएं और प्रत्येक छवि पर होवर करें। आपको कार्रवाई में विभिन्न प्रभाव देखने चाहिए।

स्लाइड-इन प्रभावों को पूरा करने के लिए, आप तीन और इमेज रैपर बना सकते हैं, जिनमें से प्रत्येक में एक इमेज और टेक्स्ट है। पाठ के प्रत्येक टुकड़े में कक्षा का नाम होगा ऊपर स्लाइड करे , नीचे खिसकना, या मामूली-दाहिना . तब आप उचित मान पास करेंगे पिक्सेल, ईएम, या रेम , के अंदर परिवर्तन () तीनों प्रभावों को बनाने के लिए कार्य करता है।

सीएसएस ग्रिड और फ्लेक्सबॉक्स

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

मुफ्त मूवी स्ट्रीम ऑनलाइन कोई साइन अप नहीं