एलिमेंटर इमेज होवर इफेक्ट्स: छवियों के लिए ३० होवर एनिमेशन
एक स्थिर छवि बस वहां बैठती है छवि होवर प्रभाव जोड़ें और वही चित्र कुछ काम करना शुरू कर देता है: एक शीर्षक स्लाइड में, एक विवरण फीका हो जाता है, और एक क्लिक लोगों को एक लिंक पर भेजता है या एक पूर्ण पॉपअप खोलता है एलिमेंटर के लिए छवि होवर प्रभाव विजेट ३० होवर एनिमेशन (फ्री प्लगइन में ८ और प्रो के साथ २२ और) के साथ जहाज करता है और आप उन्हें सीएसएस की एक पंक्ति लिखे बिना सेट करते हैं यह उन जगहों पर फिट बैठता है जहां एक छवि को एक शीर्षक, एक कैप्शन और एक कार्रवाई करनी होती है: पोर्टफोलियो, टीम ग्रिड, सर्विस कार्ड, उत्पाद शोकेस।
एक प्रभाव चुनें, चुनें कि क्लिक क्या करता है, और अपने डिजाइन से मेल खाने के लिए प्रत्येक परत को स्टाइल करें आप जो अंत करते हैं वह एक छवि कार्ड है जो लोग वास्तव में स्क्रॉल करने के बजाय पिछले पर रोकते हैं नीचे दिया गया वीडियो पूरी चीज के माध्यम से चलता है, हर एनीमेशन दिखाता है, और सेटअप में कुछ मिनट लगते हैं।
इमेज होवर प्रभाव क्या हैं?
एक छवि होवर प्रभाव एक एनीमेशन है जो किसी चित्र पर माउस ले जाने पर आग लगाता है। समतल रहने के बजाय, छवि प्रतिक्रिया करती है। यह ज़ूम कर सकता है, धुंधला कर सकता है, रंग बदल सकता है, या टेक्स्ट पैनल को देखने में स्लाइड कर सकता है। सबसे आम प्रकार एक छवि ओवरले है, जहां एक शीर्षक और विवरण छवि पर पाठ के रूप में दिखाई देता है। आप उन्हें भी बुलाते हुए देखेंगे छवि रोलओवर प्रभाव या फोटो होवर प्रभाव, और वे सभी एक ही काम करते हैं: एक सादे छवि लें और इसे “ के रूप में पढ़ें, यहां और भी बहुत कुछ है, मुझे।” पर क्लिक करें
आप कस्टम सीएसएस के साथ हाथ से यह सब बना सकते हैं इसका मतलब है कि संक्रमण लिखना, उन्हें मोबाइल पर व्यवहार करना, और हर बार डिजाइन शिफ्ट होने पर कोड में वापस जाना मास्टर एडॉन्स विजेट एलिमेंट के अंदर नेत्रहीन रूप से संभालता है, इसलिए आपको मिलता है सरल छवि होवर प्रभाव कोड संपादक खोलने के बिना यदि आप टूलकिट के बाकी देखना चाहते हैं, तो ब्राउज़ करें मास्टर ऐडऑन विजेट और एक्सटेंशन या एलिमेंटर एनीमेशन विशेषताएं.
30 होवर एनिमेशन, उनमें से 8 निःशुल्क
होवर पर पहली छापें होती हैं आपको सीएसएस एनिमेशन की एक लाइब्रेरी मिलती है जो आपके शीर्षक और विवरण को सुचारू रूप से लाती है, इसलिए पाठ स्क्रीन पर पॉपिंग के बजाय आता है एक क्लिक के साथ किसी भी प्रभाव को लागू करें, फिर संपादक में उनके माध्यम से चक्र करें जब तक कि एक छवि को व्यवस्थित करने से पहले मैं आमतौर पर तीन या चार की कोशिश करता हूं, क्योंकि एक प्रभाव जो एक विस्तृत परिदृश्य शॉट पर बहुत अच्छा लगता है, एक तंग चित्र फसल पर महसूस कर सकता है।
- फीका और ज़ूम: छवि फीका या स्केल हो जाता है जबकि पाठ फीका हो जाता है।
- स्लाइड (ऊपर, नीचे, बाएँ, दाएँ): एक कैप्शन पैनल किसी भी किनारे से स्लाइड करता है।
- पुश करें और प्रकट करें: शीर्षक और विवरण के लिए जगह बनाने के लिए छवि बदल जाती है।
- तैरें और चमकें: छवि पर एक छोटी सी लिफ्ट और एक हल्का स्वीप।
- आठ प्रभाव निःशुल्क हैं: लिली, सैडी, रॉक्सी, बुब्बा, रोमियो, लैला, हनी और ऑस्कर। प्रो ने मार्ले से ड्यूक तक 22 और जोड़े।
- सीएसएस पर चलता है: गति सुचारू रहती है क्योंकि यह भारी स्क्रिप्ट पर निर्भर नहीं होती है।
- परीक्षण करने के लिए त्वरित: संपादक में प्रभाव स्वैप करें और तुरंत परिवर्तन देखें।
छवि होवर प्रभाव उदाहरण
प्रभाव देखने के लिए प्रत्येक कार्ड पर पॉइंटर को ले जाएं, या फोन पर टैप करें। ये आठ ऐसे प्रभाव हैं जो बिना प्रो के काम करते हैं, और प्रत्येक कार्ड एक लाइव इमेज होवर इफेक्ट विजेट है।
एला और सैम
समरसेट · जून
कुमुदिनी
ग्रीस
11 दिन
सैडी
मुख्य तल
कार्डियो और मशीनें
रॉक्सी
भूत
12,400 मील
बुब्बा
क्लिफ हाउस
4 बिस्तर · ईपीसी बी
रोमियो
दीर्घा की दीवार
ब्रिस्टल · 2025
लैला
स्टार्टर्स नौ व्यंजन
मधु
बाहरी वस्त्र
87 टुकड़े
ऑस्कर
सभी 30 छवि होवर प्रभाव
होवर इफेक्ट ड्रॉपडाउन में नाम से 30 प्रभाव सूचीबद्ध हैं। हर एक छवि पर शीर्षक और विवरण को एनिमेट करता है, और वे ओवरले, टेक्स्ट और छवि कैसे चलते हैं, इसमें भिन्न होते हैं।
| प्रभाव | जरूरतमंदों के लिए जरूरत | प्रभाव | जरूरतमंदों के लिए जरूरत |
|---|---|---|---|
| कुमुदिनी | नहीं | जूलिया | हाँ |
| सैडी | नहीं | गोलियत | हाँ |
| रॉक्सी | नहीं | हेरा | हाँ |
| बुब्बा | नहीं | विंस्टन | हाँ |
| रोमियो | नहीं | सेलेना | हाँ |
| लैला | नहीं | टेरी | हाँ |
| मधु | नहीं | फ़ोबे | हाँ |
| ऑस्कर | नहीं | अपोलो | हाँ |
| मार्ले | हाँ | किरा | हाँ |
| रूबी | हाँ | स्टीव | हाँ |
| मिलो | हाँ | क़बीलेदार | हाँ |
| दाढ़ी | हाँ | जैज़ | हाँ |
| सारा | हाँ | मिंग | हाँ |
| ज़ोए | हाँ | लेक्सी | हाँ |
| चिको | हाँ | ड्यूक | हाँ |
स्मार्ट लिंकिंग और पॉपअप सामग्री क्लिक पर
आप तय करते हैं कि जब कोई कार्ड क्लिक करता है तो क्या होता है इसे किसी भी यूआरएल पर एक मानक लिंक के साथ इंगित करें, या, प्रो के साथ, पॉपअप पर कार्रवाई स्विच करें और लोगों को पृष्ठ पर रखें पॉपअप या तो पाठ तक सीमित नहीं है: सामग्री प्रकार सेट करें सहेजा अनुभाग और यह आपके द्वारा पहले से बनाए गए किसी भी एलिमेंटर टेम्पलेट को खींचता है जो एक छवि कार्ड को एक पूर्ण जैव, एक उत्पाद स्पेक शीट, या एक संपर्क फ़ॉर्म के द्वार में बदल देता है, और आगंतुक कभी भी पृष्ठ नहीं छोड़ता है।
- दो क्लिक क्रियाएँः एक लिंक के साथ ट्रैफ़िक भेजें, या पॉपअप (प्रो) के साथ लोगों को साइट पर रखें।
- पॉपअप (प्रो) में वास्तविक टेम्पलेटः अपनी लाइब्रेरी से एक छवि, पाठ या पूर्ण लेआउट दिखाएं।
- छेड़ो, फिर बताओः छवि हुक है और पॉपअप में विवरण है।
छवि पर पाठ: शीर्षक, विवरण और ओवरले स्टाइल
आप नियंत्रित करते हैं कि कार्ड विवरण के लिए नीचे कैसे दिखता है अपनी छवि अपलोड करें और इसकी अस्पष्टता सेट करें और सामान्य और होवर राज्यों के लिए अलग से फ़िल्टर करें एक शीर्षक जोड़ें (सही एचटीएमएल टैग चुनें ताकि यह आपके पृष्ठ संरचना में मदद करे) और एक विवरण, फिर प्रत्येक टुकड़े को अपने स्वयं के रंगों, प्रकार, छाया और रिक्ति के साथ अपने आप स्टाइल करें।
- अलग शीर्षक और विवरणः प्रत्येक को स्टाइल करें ताकि पदानुक्रम स्पष्ट रूप से पढ़े।
- छवि फिल्टरः होवर पर ग्रेस्केल-टू-कलर ट्रिक अभी भी अच्छी लगती है और यहां एक-सेटिंग बदलाव है।
- कार्ड फ्रेमः पृष्ठभूमि, सीमाओं और बॉक्स छाया, प्लस गोल कोनों और प्रो के साथ पैडिंग, इसलिए यह आपके लेआउट में सही बैठता है।
एलिमेंटर होवर विकल्प बनाम छवि होवर प्रभाव विजेट
एलिमेंटर की अपनी इमेज विजेट में स्टाइल टैब में होवर सेटिंग्स हैं: अपारदर्शिता, सीएसएस फिल्टर और होवर एनीमेशन जैसे ग्रो या पल्स। वे तस्वीर ही बदल देते हैं। वे छवि पर टेक्स्ट नहीं डाल सकते हैं, जो कि यह विजेट भरने वाला अंतर है।
| एलिमेंटर इमेज विजेट | छवि होवर प्रभाव विजेट | |
|---|---|---|
| होवर पर अस्पष्टता | हाँ | हाँ |
| होवर पर सीएसएस फ़िल्टर | हाँ | हाँ |
| होवर एनीमेशन | प्रीसेट जो पूरी छवि को स्थानांतरित करते हैं | 30 प्रभाव जो ओवरले, शीर्षक और विवरण को एनिमेट करते हैं |
| छवि पर पाठ | नहीं । कैप्शन छवि के नीचे बैठता है। | छवि पर शीर्षक और विवरण |
| होवर पर दिखाई देने वाला टेक्स्ट | नहीं | हाँ |
| क्रिया पर क्लिक करें | लिंक या लाइटबॉक्स | लिंक, या प्रो के साथ एक पॉपअप |
| होवर पर दूसरी छवि पर स्वैप करें | नहीं | नहीं उपयोग उन्नत छवि उसके लिए। |
छवि होवर प्रभाव एक नज़र में
एक तालिका में विजेट के बारे में मुख्य तथ्य।
| फ़ीचर | छवि होवर प्रभाव |
|---|---|
| होवर प्रभाव | 30. उनमें से 22 को प्रो की जरूरत है। |
| छवि पर पाठ | शीर्षक और विवरण, शीर्षक के लिए H1 से H6 तक HTML टैग के साथ |
| क्रिया पर क्लिक करें | कोई नहीं, एक लिंक, या एक पॉपअप (समर्थक) |
| पॉपअप सामग्री (समर्थक) | टेक्स्ट, एक छवि, या एक सहेजा गया अनुभाग, विजेट या पेज टेम्पलेट |
| छवि सेटिंग | अस्पष्टता और फिल्टर, सामान्य और होवर के लिए अलग से सेट करें |
| होवर पर दूसरी छवि | नहीं |
| टच स्क्रीन | पहला टैप टेक्स्ट दिखाता है। दूसरा टैप लिंक का अनुसरण करता है। |
| जरूरतें | एलिमेंटर और मास्टर एडॉन्स |
एलिमेंट में इमेज होवर इफेक्ट्स कैसे जोड़ें?
आपके पास दो मिनट के भीतर एक कामकाजी होवर कार्ड हो सकता है कोई सीएसएस नहीं, कोई शॉर्टकोड नहीं।
- मास्टर ऐडऑन स्थापित करें और सक्रिय करें, फिर एलिमेंटर के साथ किसी भी पृष्ठ को संपादित करें।
- के लिए विजेट पैनल खोजें छवि होवर प्रभाव और इसे अपने लेआउट पर खींचें।
- अपनी छवि अपलोड करें और एक शीर्षक और विवरण जोड़ें।
- होवर प्रभाव ड्रॉपडाउन खोलें और एक एनीमेशन चुनें आठ मुफ्त हैं और २२ और प्रो के साथ आते हैं।
- यदि आपके पास प्रो है तो क्लिक क्रिया को किसी लिंक पर, या सहेजे गए टेम्पलेट वाले पॉपअप पर सेट करें।
- शीर्षक, विवरण और कंटेनर को स्टाइल करें, फिर प्रकाशित करें।
प्रकाशित करने से पहले एक चीज करने लायक है: फोन पर कार्ड का पूर्वावलोकन करें होवर स्पर्श पर मौजूद नहीं है, इसलिए जांचें कि नल का व्यवहार समझ में आता है (अक्सर पूछे जाने वाले प्रश्न में उस पर अधिक) क्रम में रखी गई प्रत्येक सेटिंग के लिए, का पालन करें छवि होवर प्रभाव दस्तावेज़ीकरण.
छवियों पर होवर प्रभाव का उपयोग कहां करें?
- टीम ग्रिड: होवर पर नाम और भूमिका, फिर क्लिक पर पॉपअप में एक पूर्ण जैव यहाँ है टीम के सदस्यों का अनुभाग कैसे बनाएं.
- पोर्टफोलियो और गैलरीः प्रत्येक फोटो पर एक प्रोजेक्ट शीर्षक और एक “View केस स्टडी” लिंक।
- सेवा कार्डः एक संक्षिप्त विवरण और सेवा पृष्ठ के माध्यम से एक लिंक।
- उत्पाद शोकेस: उत्पाद छवि को छेड़ें, फिर एक पॉपअप में चश्मा खोलें।
- ब्लॉग और श्रेणी टाइल्सः छवि-आधारित नेविगेशन पर एक होवर कैप्शन।
पाठ और चित्रों को एक साथ रखने के अधिक तरीकों के लिए, पढ़ें 25 एलिमेंटर टेक्स्ट-ओवर-इमेज तकनीक। संबंधित छवि विजेट में शामिल हैं छवि हिंडोला, द फ़िल्टर करने योग्य छवि गैलरी, द छवि हॉटस्पॉट विजेट और उन्नत छवि विजेट।
इमेज होवर इफेक्ट्स के लिए अक्सर पूछे जाने वाले प्रश्न
क्या ये होवर प्रभाव मोबाइल उपकरणों पर काम करेंगे?
वे डेस्कटॉप के लिए बनाए गए हैं, जहां एक माउस होवर करने के लिए है एक टचस्क्रीन पर प्रभाव आमतौर पर सामग्री दिखाने के लिए पहले टैप पर आग लगाता है, और दूसरा टैप लिंक का अनुसरण करता है या पॉपअप खोलता है इसलिए मोबाइल पर दो टैप की योजना बनाएं, और सुनिश्चित करें कि पाठ एक बार दिखाने के बाद पठनीय रहता है।
मैं सीएसएस लिखे बिना सरल छवि होवर प्रभाव कैसे बना सकता हूं?
अपने पृष्ठ पर छवि होवर प्रभाव विजेट ड्रॉप, एक छवि अपलोड, एक शीर्षक और विवरण जोड़ें, और ड्रॉपडाउन से एक एनीमेशन उठाओ यह है, कोई सीएसएस नहीं विजेट आप के लिए पर्दे के पीछे सीएसएस लिखता है, तो भी एक काफी शामिल होवर कार्ड एक साथ रखा करने के लिए आसान रहता है।
क्या मैं क्लिक पर पॉपअप में टीम बायो या उत्पाद विवरण खोल सकता हूं?
हाँ, प्रो के साथ शीर्षक में नाम और विवरण में भूमिका रखो, क्लिक क्रिया को पॉपअप पर सेट करें, और सामग्री प्रकार चुनें: सहेजा गया अनुभाग एलिमेंट में टेम्पलेट के रूप में जैव का निर्माण करें और इसे यहां चुनें फोटो पर क्लिक करें और वह पूर्ण लेआउट पॉपअप में खुलता है।
क्या सभी ३० छवि होवर प्रभाव मुक्त हैं?
नहीं आठ प्रभाव मुक्त हैं: लिली, सैडी, रॉक्सी, बुब्बा, रोमियो, लैला, हनी और ऑस्कर अन्य २२ मास्टर एडॉन्स प्रो के साथ आते हैं, साथ ही पॉपअप सामग्री, गोल कोनों और पैडिंग नियंत्रण शीर्षक, विवरण, लिंक और छवि फ़िल्टर सभी मुफ्त संस्करण में काम करते हैं।
जब कोई एलिमेंटर में किसी छवि पर होवर करता है तो मैं टेक्स्ट कैसे दिखाऊं?
इमेज होवर इफेक्ट्स विजेट जोड़ें, इमेज अपलोड करें, टाइटल टाइप करें और एक विवरण टाइप करें और एक होवर इफेक्ट चुनें। टेक्स्ट तब तक छिपा रहता है जब तक कि पॉइंटर छवि के ऊपर नहीं हो जाता, फिर एनिमेटेड हो जाता है। एलिमेंटर की अपनी इमेज विजेट में इमेज पर टेक्स्ट के लिए कोई सेटिंग नहीं है।
क्या कई एनिमेटेड इमेज कार्ड मेरी साइट को धीमा कर देंगे?
सीएसएस पर प्रभाव चलते हैं, इसलिए एक पृष्ठ पर मुट्ठी भर कोई समस्या नहीं है वास्तव में चीजों को धीमा कर देता है छवि वजन है, इसलिए पहले अपनी छवियों को संपीड़ित करें एक बार जब आप एक पृष्ठ पर २० या इतने कार्ड से आगे निकल जाते हैं, तो आलसी लोडिंग चालू करें और पहला पेंट जल्दी रहता है।
क्या मैं विभिन्न छवियों पर विभिन्न होवर प्रभावों का उपयोग कर सकता हूं?
सेटिंग्स एक समय में एक कार्ड को कवर करती हैं प्रभावों को मिलाने के लिए, प्रत्येक छवि के लिए एक अलग छवि होवर प्रभाव विजेट जोड़ें और उन्हें स्वतंत्र रूप से सेट करें इस तरह आपको एक गैलरी मिलती है जहां कार्ड सभी एक ही तरह से चेतन नहीं होते हैं।
सादे पाठ पर पॉपअप में "सहेजे गए अनुभाग" का क्या लाभ है?
सहेजा गया अनुभाग एक प्रो विकल्प है, और यह आपको पॉपअप के अंदर पूर्ण एलिमेंटर संपादक देता है सादे पाठ के बजाय आप चित्र, बटन, कॉलम, वीडियो या फॉर्म जोड़ सकते हैं, इसलिए पॉपअप आपकी साइट के बाकी हिस्सों की तरह दिखता है बजाय एक नंगे पाठ बॉक्स के।
मैं एलिमेंट में होवर पर एक छवि कैसे ज़ूम करूं?
एक सादे ज़ूम के लिए, एलिमेंटर की इमेज विजेट चुनें, स्टाइल टैब खोलें और होवर एनीमेशन को बढ़ने के लिए सेट करें। छवि होवर प्रभाव विजेट में, शीर्षक और विवरण आने पर कई प्रभाव छवि को स्केल करते हैं।
क्या मैं होवर पर छवि बदल सकता हूँ?
इस विजेट के साथ नहीं। यह एक छवि रखता है और इसके ऊपर ओवरले और टेक्स्ट को एनिमेट करता है। होवर पर दूसरी छवि पर स्वैप करने के लिए, का उपयोग करें उन्नत छवि विजेट और डिस्प्ले होवर इमेज चालू करें।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
![एलिमेंट के लिए मास्टर ऐडऑन पोस्ट/पेज डुप्लीकेटर एक्सटेंशन: वर्डप्रेस पेज सूची में एमए डुप्लीकेटर पंक्ति लिंक एक लैंडिंग पेज बना रहा है - [डुप्लिकेट #128] ड्राफ्ट](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
पोस्ट/पेज डुप्लीकेटर
