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

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

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

छवियों के लिए HTML बनाना

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

<डिवकक्षा="जाल">
<डिवकक्षा="इमेज-रैपर">
<आईएमजीकक्षा="धुंधला"स्रोत=" https://picsum.photos/500?random=1"alt="">
<डिवकक्षा="सामग्री फीका">
 लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटुर एडिपिसिसिंग एलीट। सोलुटा विज्ञापन





instagram viewer

 एसईडी एट एमेट ब्लैंडिटिस उल्लम इप्सम डक्टस सिट रिकसंडे वेल!
डिव>
डिव>

<डिवकक्षा="इमेज-रैपर">
<आईएमजीकक्षा="ज़ूम ब्लर"स्रोत=" https://picsum.photos/500?random=2"alt="">
<डिवकक्षा="सामग्री फीका">
 लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटुर एडिपिसिसिंग एलीट। सोलुटा विज्ञापन
 एसईडी एट एमेट ब्लैंडिटिस उल्लम इप्सम डक्टस सिट रिकसंडे वेल!
डिव>
डिव>
<डिवकक्षा="इमेज-रैपर">
<आईएमजीकक्षा="धुंधला"स्रोत=" https://picsum.photos/500?random=3"alt="">
<डिवकक्षा="सामग्री स्लाइड-बाएँ">
 लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटुर एडिपिसिसिंग एलीट। सोलुटा विज्ञापन
 एसईडी एट एमेट ब्लैंडिटिस उल्लम इप्सम डक्टस सिट रिकसंडे वेल!
डिव>
डिव>
<डिवकक्षा="इमेज-रैपर">
<आईएमजीकक्षा="स्लेटी"स्रोत=" https://picsum.photos/500?random=3"alt="">
<डिवकक्षा="सामग्री स्लाइड-बाएँ">
 लोरेम इप्सम डोलर सिट एमेट कॉन्सेक्टेटुर एडिपिसिसिंग एलीट। सोलुटा विज्ञापन
 एसईडी एट एमेट ब्लैंडिटिस उल्लम इप्सम डक्टस सिट रिकसंडे वेल!
डिव>
डिव>
डिव>

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

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

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

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

<जोड़नासंबंधित="शैली पत्रक"href="शैली.सीएसएस">

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

शरीर {
अंतर: 0;
मार्जिन नीचे: 20रेम;
}

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

।जाल {
दिखाना: जाल;
ग्रिड-टेम्प्लेट-कॉलम: दोहराना(स्वत: फ़िट, न्यूनतम अधिकतम(300पिक्सल, 1फादर));
}

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

छवि-आवरण {
पद: रिश्तेदार;
अतिप्रवाह: छिपा हुआ;
}

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

छवि-आवरण > आईएमजी {
दिखाना: अवरोध पैदा करना;
चौड़ाई: 100%;
आस्पेक्ट अनुपात: 1 / 1;
वस्तु फिट: ढकना;
वस्तु स्थिति: केंद्र;
}

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

छवि-आवरण > ।संतुष्ट {
पद: शुद्ध;
इनसेट: 0;
फ़ॉन्ट आकार: 2रेम;
गद्दी: 1रेम;
पृष्ठभूमि: rgba(255, 255, 255, .4);
दिखाना: मोड़ना;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
}

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

छवियों और ग्रंथों पर संक्रमण की स्थापना

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

छवि-आवरण > आईएमजी,
छवि-आवरण > ।संतुष्ट {
संक्रमण: 200एमएसआसानी से बाहर;
}

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

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

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

छवि-आवरण > ।संतुष्ट।हल्का होना {
अस्पष्टता: 0;
}
छवि-आवरण: होवर > ।संतुष्ट।हल्का होना {
अस्पष्टता: 1;
}

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

छवि-आवरण: होवर > आईएमजी.धुंधला {
फ़िल्टर: कलंक(5पिक्सल)
}

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

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

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

छवि-आवरण > ।संतुष्ट.स्लाइड-बाएँ {
परिवर्तन: translateX(100%)
}
छवि-आवरण: होवर > ।संतुष्ट.स्लाइड-बाएँ {
परिवर्तन: translateX(0%)
}
छवि-आवरण: होवर > आईएमजी।स्लेटी {
फ़िल्टर: ग्रेस्केल(1)
}
छवि-आवरण: होवर > आईएमजी.धुंधला {
फ़िल्टर: कलंक(5पिक्सल)
}
छवि-आवरण: होवर > आईएमजी.ज़ूम {
परिवर्तन: पैमाना(1.1)
}

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

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

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

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