एलिमेंटर में होवर पर एक छवि को ज़ूम या कैसे बदलें

कुंजी तकिए

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

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

नीचे दी गई सभी चार विधियाँ एलिमेंटर 4.3 पर बनाई और परीक्षण की गईं।

किस विधि का उपयोग करना है

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

कंटेनर पृष्ठभूमि के साथ होवर पर एक छवि बदलें

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

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

एक ही अनुपात के साथ दो छवियों का उपयोग करें कंटेनर छवि विजेट से अपनी ऊंचाई लेता है, इसलिए एक अलग आकार के साथ एक पृष्ठभूमि क्रॉप हो जाती है।

होवर छवि विजेट के साथ होवर पर एक छवि बदलें

होवर छवि फ़ील्ड वाला विजेट एक पैनल से समान स्वैप करता है नीचे दिए गए चरण का उपयोग करें उन्नत छवि विजेट मास्टर एडॉन्स से।

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

विजेट में एक रिबन, एक लिंक और एक लाइटबॉक्स भी है, जो उत्पाद फ़ोटो के लिए उपयुक्त है: सामने का दृश्य पहले, होवर पर पीछे का दृश्य, कोने में एक नया रिबन के साथ।

होवर पर पाठ चाहते हैं? छवि होवर प्रभाव चुनने के लिए 30 प्रभावों के साथ, एक छवि पर एक शीर्षक और विवरण को एनिमेट करता है।

ग्रो प्रीसेट के साथ होवर पर एक छवि ज़ूम करें

सबसे तेज़ ज़ूम एक प्रीसेट है छवि विजेट का चयन करें, खोलें शैली, पर स्विच करें होवर टैब और सेट करें होवर एनिमेशन को बढ़ना। जब सूचक इसके ऊपर होता है तो छवि 110 प्रतिशत तक स्केल हो जाती है।

ग्रो इसके चारों ओर अंतरिक्ष के साथ एक एकल छवि के लिए अच्छी तरह से काम करता है एक तंग ग्रिड में यह इसके बगल में छवियों को ओवरलैप करता है, इसलिए वहां अगली विधि का उपयोग करें।

इसके फ्रेम के अंदर होवर पर एक छवि ज़ूम करें

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

1. छवि विजेट चुनें और खोलें उन्नत. में सीएसएस कक्षाएं, प्रकार hover-zoom.
2. अपनी साइट पर नीचे सीएसएस जोड़ें।

.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }

सीएसएस कहां जाता है यह आपके सेटअप पर निर्भर करता है एलिमेंटर प्रो में उन्नत टैब में एक कस्टम सीएसएस बॉक्स है इसके बिना, वर्डप्रेस में उपस्थिति, अनुकूलित, अतिरिक्त सीएसएस का उपयोग करें, या कस्टम सीएसएस एक्सटेंशन मास्टर एडॉन्स में एक मजबूत ज़ूम के लिए १.०८ से १.१५ बदलें।

चार चीजें जो गलत हो जाती हैं

इन प्रभावों के साथ अधिकांश समस्याएं छवि आकार और गलत डिवाइस पर परीक्षण से आती हैं।

1. दो छवियों के अलग-अलग अनुपात हैं स्वैप फिर कूदता है या फसलों दोनों को एक ही चौड़ाई और ऊंचाई पर निर्यात करें।
2. ज़ूम की गई छवि आस-पास की सामग्री को कवर करती है ग्रो में कोई फ्रेम नहीं है जब छवियां एक साथ करीब बैठती हैं तो सीएसएस विधि का उपयोग करें।
3. फोन पर कुछ भी नहीं होता है टच स्क्रीन में कोई होवर नहीं है सुनिश्चित करें कि पहली छवि अकेले काम करती है, क्योंकि फोन आगंतुक कभी भी दूसरा नहीं देख सकते हैं।
4. होवर छवि भारी है दोनों फ़ाइलों को संपीड़ित करें, क्योंकि एक बड़ी दूसरी छवि पहले होवर पर एक खाली फ्लैश के रूप में दिखा सकती है।

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

अंतिम विचार

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

द उन्नत छवि विजेट एक पैनल में स्वैप को संभालता है, और छवि होवर प्रभाव टेक्स्ट ओवरले को कवर करता है।

संबंधित पढ़ने

• पहले और बाद के लिए एलिमेंटर छवि तुलना स्लाइडर
• छवि पर एलिमेंट टेक्स्ट
• एलिमेंट छवि बॉक्स
• एलिमेंटर में इमेज होवर प्रभाव कैसे जोड़ें (३ तरीके)
• एलिमेंट के लिए ३० छवि होवर प्रभाव