छवि होवर प्रभाव
एक स्थिर छवि बस वहां बैठती है छवि होवर प्रभाव जोड़ें और वही चित्र कुछ काम करना शुरू कर देता है: एक शीर्षक स्लाइड करता है, एक विवरण फीका हो जाता है, और एक क्लिक लोगों को एक लिंक पर भेजता है या एक पूर्ण पॉपअप खोलता है एलिमेंटर के लिए छवि होवर प्रभाव विजेट ३० + होवर एनिमेशन (फीका, ज़ूम, स्लाइड, पुश, और बाकी) के साथ जहाज और आप उन्हें सीएसएस की एक पंक्ति लिखे बिना सेट करते हैं यह उन स्थानों पर फिट बैठता है जहां एक छवि को एक शीर्षक, एक कैप्शन और एक कार्रवाई करनी होती है: पोर्टफोलियो, टीम ग्रिड, सर्विस कार्ड, उत्पाद शोकेस।
एक प्रभाव चुनें, चुनें कि क्लिक क्या करता है, और अपने डिजाइन से मेल खाने के लिए प्रत्येक परत को स्टाइल करें आप जो अंत करते हैं वह एक छवि कार्ड है जो लोग वास्तव में स्क्रॉल करने के बजाय पिछले पर रोकते हैं नीचे दिया गया वीडियो पूरी चीज के माध्यम से चलता है, हर एनीमेशन दिखाता है, और सेटअप में कुछ मिनट लगते हैं।
इमेज होवर प्रभाव क्या हैं?
एक छवि होवर प्रभाव एक एनीमेशन है जो आग लगाता है जब कोई तस्वीर पर माउस ले जाता है फ्लैट रहने के बजाय, छवि प्रतिक्रिया करती है यह ज़ूम, धुंधला, रंग बदल सकता है, या दृश्य में एक पाठ पैनल स्लाइड कर सकता है आप उन्हें भी बुलाएंगे छवि रोलओवर प्रभाव या फोटो होवर प्रभाव, और वे सभी एक ही काम करते हैं: एक सादे छवि लें और इसे “ के रूप में पढ़ें, यहां और भी बहुत कुछ है, मुझे।” पर क्लिक करें
आप कस्टम सीएसएस के साथ हाथ से यह सब बना सकते हैं इसका मतलब है कि संक्रमण लिखना, उन्हें मोबाइल पर व्यवहार करना, और हर बार डिजाइन शिफ्ट होने पर कोड में वापस जाना मास्टर एडॉन्स विजेट एलिमेंट के अंदर नेत्रहीन रूप से संभालता है, इसलिए आपको मिलता है सरल छवि होवर प्रभाव कोड संपादक खोलने के बिना यदि आप टूलकिट के बाकी देखना चाहते हैं, तो ब्राउज़ करें मास्टर ऐडऑन विजेट और एक्सटेंशन या एलिमेंटर एनीमेशन विशेषताएं.
30+ पूर्व-निर्मित होवर एनिमेशन
होवर पर पहली छापें होती हैं आपको सीएसएस एनिमेशन की एक लाइब्रेरी मिलती है जो आपके शीर्षक और विवरण को सुचारू रूप से लाती है, इसलिए पाठ स्क्रीन पर पॉपिंग के बजाय आता है एक क्लिक के साथ किसी भी प्रभाव को लागू करें, फिर संपादक में उनके माध्यम से चक्र करें जब तक कि एक छवि को व्यवस्थित करने से पहले मैं आमतौर पर तीन या चार की कोशिश करता हूं, क्योंकि एक प्रभाव जो एक विस्तृत परिदृश्य शॉट पर बहुत अच्छा लगता है, एक तंग चित्र फसल पर महसूस कर सकता है।
- फीका और ज़ूम: छवि फीका या स्केल हो जाता है जबकि पाठ फीका हो जाता है।
- स्लाइड (ऊपर, नीचे, बाएँ, दाएँ): एक कैप्शन पैनल किसी भी किनारे से स्लाइड करता है।
- पुश करें और प्रकट करें: शीर्षक और विवरण के लिए जगह बनाने के लिए छवि बदल जाती है।
- तैरें और चमकें: छवि पर एक छोटी सी लिफ्ट और एक हल्का स्वीप।
- चुनने के लिए बहुत कुछ: एक छोर पर शांत फीका, दूसरे पर बोल्ड दिशात्मक स्लाइड।
- सीएसएस पर चलता है: गति सुचारू रहती है क्योंकि यह भारी स्क्रिप्ट पर निर्भर नहीं होती है।
- परीक्षण करने के लिए त्वरित: संपादक में प्रभाव स्वैप करें और तुरंत परिवर्तन देखें।
स्मार्ट लिंकिंग और पॉपअप सामग्री क्लिक पर
आप तय करते हैं कि जब कोई कार्ड क्लिक करता है तो क्या होता है इसे किसी भी यूआरएल पर एक मानक लिंक के साथ इंगित करें, या पॉपअप पर कार्रवाई स्विच करें और लोगों को पृष्ठ पर रखें पॉपअप या तो पाठ तक सीमित नहीं है: सामग्री प्रकार सेट करें सहेजा अनुभाग और यह आपके द्वारा पहले से बनाए गए किसी भी एलिमेंटर टेम्पलेट को खींचता है जो एक छवि कार्ड को एक पूर्ण जैव, एक उत्पाद स्पेक शीट, या एक संपर्क फ़ॉर्म के द्वार में बदल देता है, और आगंतुक कभी भी पृष्ठ नहीं छोड़ता है।
- दो क्लिक क्रियाएँः किसी लिंक के साथ ट्रैफ़िक भेजें, या पॉपअप के साथ लोगों को साइट पर रखें।
- पॉपअप में वास्तविक टेम्पलेटः सादे पाठ का उपयोग करें, या अपनी लाइब्रेरी से पूर्ण लेआउट में ड्रॉप करें।
- छेड़ो, फिर बताओः छवि हुक है और पॉपअप में विवरण है।
पूर्ण सामग्री और शैली नियंत्रण
आप नियंत्रित करते हैं कि कार्ड विवरण के लिए नीचे कैसे दिखता है अपनी छवि अपलोड करें और इसकी अस्पष्टता सेट करें और सामान्य और होवर राज्यों के लिए अलग से फ़िल्टर करें एक शीर्षक जोड़ें (सही एचटीएमएल टैग चुनें ताकि यह आपके पृष्ठ संरचना में मदद करे) और एक विवरण, फिर प्रत्येक टुकड़े को अपने स्वयं के रंगों, प्रकार, छाया और रिक्ति के साथ अपने आप स्टाइल करें।
- अलग शीर्षक और विवरणः प्रत्येक को स्टाइल करें ताकि पदानुक्रम स्पष्ट रूप से पढ़े।
- छवि फिल्टरः होवर पर ग्रेस्केल-टू-कलर ट्रिक अभी भी अच्छी लगती है और यहां एक-सेटिंग बदलाव है।
- कार्ड फ्रेमः पृष्ठभूमि, सीमाएं, गोल कोने, पैडिंग और बॉक्स छाया, इसलिए यह आपके लेआउट में सही बैठता है।
एलिमेंट में इमेज होवर इफेक्ट्स कैसे जोड़ें?
आपके पास दो मिनट के भीतर एक कामकाजी होवर कार्ड हो सकता है कोई सीएसएस नहीं, कोई शॉर्टकोड नहीं।
- मास्टर ऐडऑन स्थापित करें और सक्रिय करें, फिर एलिमेंटर के साथ किसी भी पृष्ठ को संपादित करें।
- के लिए विजेट पैनल खोजें छवि होवर प्रभाव और इसे अपने लेआउट पर खींचें।
- अपनी छवि अपलोड करें और एक शीर्षक और विवरण जोड़ें।
- होवर इफ़ेक्ट ड्रॉपडाउन खोलें और 30+ एनिमेशन में से एक चुनें।
- क्लिक क्रिया को लिंक या पॉपअप पर सेट करें, और पॉपअप सामग्री के लिए सहेजा गया टेम्पलेट चुनें।
- शीर्षक, विवरण और कंटेनर को स्टाइल करें, फिर प्रकाशित करें।
प्रकाशित करने से पहले एक चीज करने लायक है: फोन पर कार्ड का पूर्वावलोकन करें होवर स्पर्श पर मौजूद नहीं है, इसलिए जांचें कि नल का व्यवहार समझ में आता है (अक्सर पूछे जाने वाले प्रश्न में उस पर अधिक) क्रम में रखी गई प्रत्येक सेटिंग के लिए, का पालन करें छवि होवर प्रभाव दस्तावेज़ीकरण.
छवियों पर होवर प्रभाव का उपयोग कहां करें?
- टीम ग्रिड: होवर पर नाम और भूमिका, फिर क्लिक पर पॉपअप में एक पूर्ण जैव यहाँ है टीम के सदस्यों के अनुभाग का निर्माण कैसे करें.
- पोर्टफोलियो और गैलरीः प्रत्येक फोटो पर एक प्रोजेक्ट शीर्षक और एक “View केस स्टडी” लिंक।
- सेवा कार्डः एक संक्षिप्त विवरण और सेवा पृष्ठ के माध्यम से एक लिंक।
- उत्पाद शोकेस: उत्पाद छवि को छेड़ें, फिर एक पॉपअप में चश्मा खोलें।
- ब्लॉग और श्रेणी टाइल्सः छवि-आधारित नेविगेशन पर एक होवर कैप्शन।
पाठ और चित्रों को एक साथ रखने के अधिक तरीकों के लिए, पढ़ें 25 एलिमेंटर टेक्स्ट-ओवर-इमेज तकनीक, या संबंधित छवि विजेट जैसे देखें छवि हॉटस्पॉट विजेट और द एलिमेंट छवि हिंडोला.
इमेज होवर इफेक्ट्स के लिए अक्सर पूछे जाने वाले प्रश्न
क्या ये होवर प्रभाव मोबाइल उपकरणों पर काम करेंगे?
वे डेस्कटॉप के लिए बनाए गए हैं, जहां एक माउस होवर करने के लिए है एक टचस्क्रीन पर प्रभाव आमतौर पर सामग्री दिखाने के लिए पहले टैप पर आग लगाता है, और दूसरा टैप लिंक का अनुसरण करता है या पॉपअप खोलता है इसलिए मोबाइल पर दो टैप की योजना बनाएं, और सुनिश्चित करें कि पाठ एक बार दिखाने के बाद पठनीय रहता है।
मैं सीएसएस लिखे बिना सरल छवि होवर प्रभाव कैसे बना सकता हूं?
अपने पृष्ठ पर छवि होवर प्रभाव विजेट ड्रॉप, एक छवि अपलोड, एक शीर्षक और विवरण जोड़ें, और ड्रॉपडाउन से एक एनीमेशन उठाओ यह है, कोई सीएसएस नहीं विजेट आप के लिए पर्दे के पीछे सीएसएस लिखता है, तो भी एक काफी शामिल होवर कार्ड एक साथ रखा करने के लिए आसान रहता है।
क्या मैं क्लिक पर पॉपअप में टीम बायो या उत्पाद विवरण खोल सकता हूं?
हाँ शीर्षक में नाम और विवरण में भूमिका रखो, क्लिक क्रिया को पॉपअप पर सेट करें, और सामग्री प्रकार चुनें: सहेजा गया अनुभाग एलिमेंटर में टेम्पलेट के रूप में जैव का निर्माण करें और इसे यहां चुनें फोटो पर क्लिक करें और वह पूर्ण लेआउट पॉपअप में खुलता है।
मैं लिंक और पॉपअप के बीच कैसे चयन करूं?
जब आप विज़िटर को किसी अन्य पृष्ठ पर ले जाना चाहते हैं, जैसे उत्पाद पृष्ठ या ब्लॉग पोस्ट, तो एक लिंक का उपयोग करें जब आप वर्तमान पृष्ठ को छोड़े बिना अधिक दिखाना चाहते हैं तो पॉपअप का उपयोग करें: चश्मा, एक छोटा जैव, एक संपर्क फ़ॉर्म, या छवि का एक बड़ा दृश्य।
क्या कई एनिमेटेड इमेज कार्ड मेरी साइट को धीमा कर देंगे?
सीएसएस पर प्रभाव चलते हैं, इसलिए एक पृष्ठ पर मुट्ठी भर कोई समस्या नहीं है वास्तव में चीजों को धीमा कर देता है छवि वजन है, इसलिए पहले अपनी छवियों को संपीड़ित करें एक बार जब आप एक पृष्ठ पर २० या इतने कार्ड से आगे निकल जाते हैं, तो आलसी लोडिंग चालू करें और पहला पेंट जल्दी रहता है।
क्या मैं विभिन्न छवियों पर विभिन्न होवर प्रभावों का उपयोग कर सकता हूं?
सेटिंग्स एक समय में एक कार्ड को कवर करती हैं प्रभावों को मिलाने के लिए, प्रत्येक छवि के लिए एक अलग छवि होवर प्रभाव विजेट जोड़ें और उन्हें स्वतंत्र रूप से सेट करें इस तरह आपको एक गैलरी मिलती है जहां कार्ड सभी एक ही तरह से चेतन नहीं होते हैं।
सादे पाठ पर पॉपअप में "सहेजे गए अनुभाग" का क्या लाभ है?
एक सहेजा गया अनुभाग आपको पॉपअप के अंदर पूर्ण एलिमेंट संपादक देता है सादे पाठ के बजाय आप चित्र, बटन, कॉलम, वीडियो या फॉर्म जोड़ सकते हैं, इसलिए पॉपअप आपकी साइट के बाकी हिस्सों की तरह दिखता है बजाय एक नंगे पाठ बॉक्स के।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
पोस्ट/पेज डुप्लीकेटर
