एलिमेंट में इमेज होवर इफेक्ट्स कैसे जोड़ें (३ तरीके)

ग्रेस्केल में मंडराने से पहले और रंग में मंडराने से पहले वही छवि

कुंजी तकिए

  • छवियों के लिए एलिमेंटर होवर प्रभाव छवि विजेट के स्टाइल टैब में रहते हैं, चार नियंत्रणों के साथ होवर टैब के तहत: अपारदर्शिता, सीएसएस फ़िल्टर, संक्रमण अवधि और होवर एनीमेशन।
  • एलिमेंटर में ग्रेस्केल से कलर होवर प्रभाव के लिए किसी कोड की आवश्यकता नहीं होती है: सामान्य टैब पर सीएसएस फिल्टर के तहत संतृप्ति को 0 पर सेट करें और होवर टैब पर वापस 100 पर सेट करें।
  • एलिमेंटर्स होवर एनिमेशन प्रीसेट, जैसे ग्रो, पूरी छवि को स्थानांतरित करते हैं, और ग्रो प्रीसेट एक छवि को होवर पर उसके आकार के 110 प्रतिशत तक स्केल करता है।
  • एलिमेंट का इमेज विजेट होवर पर छवि पर शीर्षक या विवरण नहीं दिखा सकता है, इसलिए टेक्स्ट ओवरले को कंटेनर वर्कअराउंड, कस्टम सीएसएस या ऐडऑन विजेट की आवश्यकता होती है।
  • मास्टर एडॉन्स इमेज होवर इफेक्ट्स विजेट में 30 नामित होवर इफेक्ट्स हैं जो एक होवर इफेक्ट ड्रॉपडाउन से चुने गए छवि पर एक शीर्षक और विवरण को एनिमेट करते हैं।

आप तीन तरीकों से एक छवि में एलिमेंटर होवर प्रभाव जोड़ सकते हैं छवि विजेट में होवर राज्य के लिए अस्पष्टता और सीएसएस फ़िल्टर सेटिंग्स हैं इसमें होवर एनीमेशन प्रीसेट भी हैं जो चित्र को स्थानांतरित करते हैं छवि पर दिखाई देने वाले शीर्षक और विवरण के लिए, आपको इसके लिए निर्मित विजेट की आवश्यकता होती है, जैसे छवि होवर प्रभाव.

यह मार्गदर्शिका एलिमेंटर 4.3 पर परीक्षण की गई सटीक सेटिंग्स के साथ प्रत्येक मार्ग को कवर करती है। यदि आप केवल चित्र पर प्रतिक्रिया करना चाहते हैं तो पहले दो से प्रारंभ करें, और यदि आप छवि पर टेक्स्ट चाहते हैं तो तीसरे पर जाएं।

जहां होवर सेटिंग्स एलिमेंटर में हैं

एक छवि विजेट चुनें, खोलें शैली छवि अनुभाग के नीचे टैब और देखो आकार नियंत्रण के नीचे दो टैब हैं, सामान्य और होवर होवर टैब पर सब कुछ केवल लागू होता है जबकि सूचक छवि पर होता है एलिमेंटर अपने में विचार बताता है होवर प्रभाव का परिचय.

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

रास्ता 1: अपारदर्शिता और सीएसएस फिल्टर

अस्पष्टता और सीएसएस फिल्टर का उपयोग करें जब छवि खुद को होवर पर बदलना चाहिए क्लासिक उदाहरण एक तस्वीर है जो काले और सफेद रंग में बैठता है और सूचक आने पर रंग में बदल जाता है।

  1. छवि विजेट चुनें और खोलें शैली.
  2. पर सामान्य टैब, बगल में पेंसिल पर क्लिक करें सीएसएस फिल्टर और खींचें संतृप्ति ० करने के लिए छवि ग्रे हो जाता है।
  3. पर स्विच करें होवर टैब, खोलें सीएसएस फिल्टर फिर से और संतृप्ति को 100 पर सेट करें।
  4. सेट संक्रमण अवधि लगभग 0.4 तक ताकि रंग फीका पड़ जाए।
  5. वैकल्पिक: थोड़ी चमक के लिए अपारदर्शिता को सामान्य पर 0.85 और होवर पर 1 पर सेट करें।
सीएसएस फिल्टर का उपयोग करके होवर से पहले ग्रेस्केल में और होवर पर पूर्ण रंग में एलिमेंटर छवि दिखाई गई है
सामान्य टैब पर संतृप्ति 0 और होवर टैब पर 100।

वही दो टैब आपको एक धुंधलापन देते हैं जो साफ करता है, एक मंद छवि जो चमकती है, या एक रंग बदलाव ०.३ और ०.५ सेकंड के बीच संक्रमण रखें झिलमिलाहट की तरह दिखने से छोटा, और लंबे समय तक धीमा लगता है।

रास्ता 2: होवर एनिमेशन प्रीसेट

होवर एनीमेशन पूरी छवि को स्थानांतरित करता है जब सूचक इसके ऊपर होता है यह होवर टैब के नीचे एक ड्रॉपडाउन है, और इसे किसी अन्य सेटअप की आवश्यकता नहीं है।

  1. छवि विजेट चुनें और खोलें शैली, फिर होवर टैब।
  2. खुला होवर एनिमेशन और एक प्रीसेट चुनें। बढ़ना वह है जिसे अधिकांश लोग चाहते हैं।
  3. पृष्ठ का पूर्वावलोकन करें और पॉइंटर को छवि पर ले जाएँ।
ग्रो होवर एनीमेशन द्वारा मध्य एक को बड़ा करते हुए एक पंक्ति में तीन एलिमेंटर छवियां
मध्य छवि में होवर एनिमेशन बढ़ने के लिए तैयार है, जो इसे 110 प्रतिशत तक मापता है।

ग्रो छवि को उसके मूल किनारों से आगे बढ़ाता है, इसलिए यह एक तंग ग्रिड में अपने पड़ोसियों को ओवरलैप कर सकता है यदि आप चाहते हैं कि चित्र एक निश्चित फ्रेम के अंदर ज़ूम हो, तो सीएसएस की कुछ लाइनें लेता है।

रास्ता ३: छवि पर पाठ के लिए एक विजेट

एक समर्पित विजेट का उपयोग करें जब होवर पर छवि पर एक शीर्षक और विवरण दिखाई देना चाहिए एलिमेंट की छवि विजेट तस्वीर के नीचे अपना कैप्शन दिखाती है और शीर्ष पर पाठ डालने के लिए कोई सेटिंग नहीं है।

ये चरण मास्टर ऐडऑन से इमेज होवर इफेक्ट्स विजेट का उपयोग करते हैं।

  1. एलिमेंटर के साथ पेज संपादित करें, विजेट पैनल खोजें छवि होवर प्रभाव और इसे पृष्ठ पर खींचें।
  2. के तहत प्रभाव एवं छवि, छवि अपलोड करें।
  3. को खोलें होवर प्रभाव ड्रॉपडाउन और ३० प्रभावों में से एक को चुनें वे नाम से सूचीबद्ध हैं, लिली, सैडी, रॉक्सी और बुब्बा से शुरू होते हैं।
  4. टाइप करें शीर्षक और द विवरण अपने-अपने वर्गों में।
  5. सेट लिंक या पॉपअप? अगर एक क्लिक कहीं जाना चाहिए।
  6. स्टाइल टैब में, ओवरले रंग, सामान्य और होवर के लिए छवि अपारदर्शिता और प्रत्येक टेक्स्ट परत के लिए टाइपोग्राफी सेट करें।
लिली पर सेट होवर इफेक्ट ड्रॉपडाउन के साथ एलिमेंटर में इमेज होवर इफेक्ट्स विजेट कंटेंट पैनल
होवर इफ़ेक्ट ड्रॉपडाउन सामग्री टैब के शीर्ष पर बैठता है।
एलिमेंटर में टेक्स्ट ओवरले के साथ चार छवि होवर प्रभाव: लिली, सैडी, ऑस्कर और रोमियो
उनके होवर राज्य में चार प्रभाव: लिली, सैडी, ऑस्कर और रोमियो।

कुछ भी स्थापित करने से पहले प्रभावों का प्रयास करें। द छवि होवर प्रभाव विजेट पृष्ठ आठ लाइव कार्ड हैं जिन्हें आप होवर कर सकते हैं, साथ ही ३० प्रभावों की पूरी सूची भी है।

आठ प्रभाव प्रो लाइसेंस के बिना काम करते हैं और 22 को मास्टर एडॉन्स प्रो की आवश्यकता होती है। प्रत्येक विजेट में एक छवि होती है, इसलिए होवर कार्ड का एक ग्रिड एक साथ कई विजेट होता है।

वीडियो ट्यूटोरियल

यह चार मिनट का वीडियो एक खाली पृष्ठ से इमेज होवर इफेक्ट्स विजेट सेट करता है।

आपको किस तरीके का उपयोग करना चाहिए?

होवर पर क्या बदलना चाहिए इसके आधार पर चुनें: चित्र, उसकी स्थिति, या उसके शीर्ष पर पाठ।

आप चाहते हैंउपयोगजरूरतें
ग्रेस्केल से रंग, धुंधला से तेज, मंद से चमकीलाहोवर टैब पर सीएसएस फ़िल्टर और अपारदर्शितातत्व
बढ़ने या नाड़ी के लिए छविहोवर एनिमेशनतत्व
एक ज़ूम जो इसके फ्रेम के अंदर रहता हैएक सीएसएस वर्ग और सीएसएस की कुछ पंक्तियाँएलिमेंटर और कहीं सीएसएस जोड़ने के लिए
छवि पर एक शीर्षक और विवरणछवि होवर प्रभाव विजेटमास्टर ऐडऑन
एक दूसरी छवि जो पहली की जगह लेती हैउन्नत छवि विजेट, या एक कंटेनर पृष्ठभूमिमास्टर ऐडऑन, या अकेले एलिमेंटर

अन्य तरीकों से संयुक्त पाठ और चित्रों के लिए, देखें छवि पर एलिमेंट टेक्स्ट.

क्या होवर प्रभाव फोन पर काम करते हैं?

होवर के रूप में नहीं, क्योंकि टच स्क्रीन के साथ होवर करने के लिए कोई सूचक नहीं है एलिमेंट के स्टाइल टैब प्रभाव फोन पर आग नहीं लगाते हैं, जो रंग बदलने के लिए कोई नुकसान नहीं पहुंचाता है।

छवि होवर प्रभाव विजेट के साथ, पहला टैप आमतौर पर पाठ दिखाता है और दूसरा टैप लिंक का अनुसरण करता है यदि पाठ आवश्यक है, जैसे कि मूल्य या नाम, तो इसे छोटे स्क्रीन पर भी कहीं दिखाई दे।

अक्सर पूछे जाने वाले प्रश्न

मैं एलिमेंट में एक छवि में होवर प्रभाव कैसे जोड़ूं?

छवि विजेट का चयन करें, स्टाइल टैब खोलें और होवर टैब पर स्विच करें होवर स्थिति के लिए अपारदर्शिता या सीएसएस फ़िल्टर सेट करें, या होवर एनीमेशन चुनें जैसे कि बढ़ना ०.३ से ०.५ सेकंड की संक्रमण अवधि जोड़ें ताकि परिवर्तन चिकनी हो।

क्या एलिमेंटर में प्लगइन के बिना छवि होवर प्रभाव है?

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

मैं एलिमेंटर में होवर पर एक छवि को काले और सफेद से रंगीन कैसे बनाऊं?

इमेज विजेट के स्टाइल टैब में, सामान्य टैब पर सीएसएस फ़िल्टर खोलें और संतृप्ति को ० पर सेट करें फिर होवर टैब पर सीएसएस फ़िल्टर खोलें और संतृप्ति को १०० पर सेट करें संक्रमण अवधि को लगभग ०.४ सेकंड पर सेट करें।

एलिमेंटर में किसी छवि पर मँडराते समय मैं टेक्स्ट कैसे दिखाऊँ?

इसके लिए बने विजेट का उपयोग करें मास्टर ऐडऑन के साथ, इमेज होवर इफेक्ट्स विजेट जोड़ें, छवि अपलोड करें, एक शीर्षक और विवरण टाइप करें और होवर इफेक्ट चुनें टेक्स्ट तब तक छिपा रहता है जब तक पॉइंटर छवि पर न हो।

मेरा एलिमेंटर होवर प्रभाव क्यों काम नहीं कर रहा है?

जांचें कि सेटिंग होवर टैब पर है और सामान्य टैब पर नहीं है, और संक्रमण अवधि ० से ऊपर है फोन या टैबलेट पर कोई होवर नहीं है, इसलिए माउस के साथ परीक्षण करें यदि आप कस्टम सीएसएस का उपयोग करते हैं, तो विजेट पर कक्षा के नाम की पुष्टि करें कोड में एक से मेल खाता है।

अंतिम विचार

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

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

रॉय जेमी की तस्वीर
रॉय जेमी
मैं रॉय जेमी, पिक्सर लैब्स में कंटेंट रैंगलर और मार्केटर हूं, एलिमेंटर के लिए मास्टर एडॉन्स पर काम कर रहा हूं मैं ट्यूटोरियल लिखता हूं, वीडियो रिकॉर्ड करता हूं, और दस्तावेज को वर्तमान रखता हूं, इसलिए आप हमेशा जानते हैं कि हर सुविधा का समर्थन भी संभालती है, इसलिए यदि आप एक रोड़ा मारते हैं, तो मैं वह व्यक्ति हूं जो आपको इसे ठीक करने में मदद करता है वास्तविक उत्तर, किसी ऐसे व्यक्ति से जो हर दिन इन उपकरणों का उपयोग करता है।

एक उत्तर छोड़ें

आपका ईमेल पता प्रकाशित नहीं किया जाएगा। आवश्यक फ़ील्ड चिह्नित हैं *