कुंजी तकिए
- एलिमेंटर में सीएसएस इमेज होवर प्रभाव दो चरण लेते हैं: उन्नत, सीएसएस क्लासेस के तहत इमेज विजेट में एक क्लास नाम जोड़ें, फिर एक सीएसएस नियम पेस्ट करें जो उस क्लास को लक्षित करता है।
- इस गाइड में पांच सीएसएस छवि होवर प्रभाव फ्रेम के अंदर एक ज़ूम, ग्रेस्केल से रंग, छाया के साथ एक लिफ्ट, एक गहरा ओवरले और एक कैप्शन है जो ऊपर स्लाइड करता है।
- एलिमेंटर प्रो में प्रत्येक विजेट के उन्नत टैब में एक कस्टम सीएसएस बॉक्स होता है, और प्रो के बिना वही सीएसएस उपस्थिति, अनुकूलित, अतिरिक्त सीएसएस में जा सकता है।
- एलिमेंटर्स इमेज विजेट अपने कैप्शन को एक आकृति के अंदर एक चित्र के रूप में प्रिंट करता है, जो अकेले सीएसएस के साथ एक स्लाइडिंग कैप्शन को संभव बनाता है।
- ग्रेस्केल से रंग और अपारदर्शिता परिवर्तन के लिए एलिमेंटर में किसी सीएसएस की आवश्यकता नहीं है, क्योंकि इमेज विजेट के स्टाइल टैब में पहले से ही होवर टैब पर सीएसएस फ़िल्टर और अपारदर्शिता है।
सीएसएस छवि होवर प्रभाव एलिमेंटर में उसी तरह काम करते हैं जैसे वे कहीं भी काम करते हैं: तत्व पर एक वर्ग और एक नियम :hoverकेवल एलिमेंटर-विशिष्ट भागों हैं जहां आप वर्ग टाइप करते हैं और जहां आप सीएसएस पेस्ट करते हैं नीचे पांच प्रभाव हैं जिन्हें आप कॉपी कर सकते हैं, प्रत्येक मानक छवि विजेट के साथ एलिमेंटर ४.३ पर परीक्षण किया गया है।
यदि आप कोड को छूना नहीं चाहते हैं, तो अंतिम अनुभाग नो-कोड मार्ग दिखाता है छवि होवर प्रभाव विजेट.
विषय-सूची
एलिमेंटर में सीएसएस होवर प्रभाव कैसे काम करते हैं
नीचे दिया गया प्रत्येक स्निपेट एक ही पैटर्न का अनुसरण करता है आप छवि विजेट को एक वर्ग देते हैं, और जब सूचक इसके ऊपर होता है तो सीएसएस उस विजेट के अंदर छवि को बदल देता है।
- एलिमेंट में इमेज विजेट चुनें।
- को खोलें उन्नत टैब और खोजें सीएसएस कक्षाएं.
- उदाहरण के लिए, बिना बिंदु के वर्ग का नाम टाइप करें
hover-zoom. - एक बार अपनी साइट पर मिलान सीएसएस जोड़ें उस वर्ग के साथ किसी भी छवि को तब प्रभाव मिलता है।
वर्ग विजेट के बाहरी तत्व पर उतरता है और चित्र एक है img इसके अंदर, इसलिए नियम लक्षित होते हैं .hover-zoom img.
सीएसएस कहां जोड़ें
आपके पास सीएसएस पेस्ट करने के लिए चार स्थान हैं, जो स्थापित है उसके आधार पर।
| जगह | जरूरतें | पर लागू होता है |
|---|---|---|
| विजेट, उन्नत, कस्टम सीएसएस | एलिमेंट प्रो | वह विजेट |
| साइट सेटिंग्स, कस्टम सीएसएस | एलिमेंट प्रो | पूरी साइट |
| उपस्थिति, अनुकूलित करें, अतिरिक्त सीएसएस | केवल वर्डप्रेस | पूरी साइट |
| कस्टम सीएसएस एक्सटेंशन | मास्टर ऐडऑन | जिस तत्व में आप इसे जोड़ते हैं |
उन कक्षाओं के लिए जिन्हें आप पुन: उपयोग करने की योजना बना रहे हैं, साइट-व्यापी स्थान बेहतर घर है कस्टम सीएसएस एक्सटेंशन पेज बताता है कि मास्टर ऐडऑन विकल्प कैसे काम करता है।
कॉपी करने के लिए ५ सीएसएस छवि होवर प्रभाव
प्रत्येक प्रभाव में एक वर्ग का नाम, सीएसएस और होवर से पहले और उसके दौरान परिणाम का एक स्क्रीनशॉट होता है।
१ फ्रेम के अंदर ज़ूम करें
छवि ऊपर की ओर बढ़ती है जबकि इसका बॉक्स समान आकार का रहता है कक्षा का नामः hover-zoom.
.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); }
२ ग्रेस्केल टू कलर
छवि काले और सफेद रंग में बैठती है और होवर पर पूर्ण रंग में बदल जाती है कक्षा का नामः hover-color.
.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }
३ छाया के साथ लिफ्ट
छवि कुछ पिक्सेल ऊपर जाती है और एक नरम छाया प्राप्त करती है, जैसे कार्ड उठाया जा रहा है कक्षा का नामः hover-lift.
.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }
४ डार्क ओवरले
छवि के ऊपर एक अंधेरे परत फीका है यह एक छद्म तत्व के साथ बनाया गया है, इसलिए कोई अतिरिक्त मार्कअप की आवश्यकता नहीं है कक्षा का नामः hover-dim.
.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }
५ कैप्शन जो ऊपर स्लाइड करता है
छवि का अपना कैप्शन नीचे किनारे के नीचे छिपा है और होवर पर ऊपर स्लाइड करता है छवि विजेट में, सेट करें कैप्शन कस्टम कैप्शन के लिए और पाठ को पहले टाइप करें कक्षा का नामः hover-caption.
.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }
यह एक कैप्शन होने पर निर्भर करता है एक कैप्शन के बिना, एलिमेंटर आंकड़ा और अंजीर को प्रिंट नहीं करता है, और नियम को स्थानांतरित करने के लिए कुछ भी नहीं है।
सीएसएस या अंतर्निहित होवर सेटिंग्स?
सीएसएस लिखने से पहले एलिमेंट के स्वयं के नियंत्रण की जांच करें, क्योंकि इन पांच प्रभावों में से दो सेटिंग्स के रूप में मौजूद हैं इमेज विजेट के स्टाइल टैब में अपारदर्शिता, सीएसएस फिल्टर और होवर एनीमेशन के साथ होवर टैब है।
| प्रभाव | एलिमेंट में निर्मित? | सीएसएस का उपयोग क्यों करें |
|---|---|---|
| ग्रेस्केल से रंग | हाँ, सीएसएस फिल्टर, संतृप्ति | कई छवियों के लिए एक वर्ग |
| ज़ूम | आंशिक रूप से। फ्रेम के पीछे बढ़ता है। | ज़ूम को फ्रेम के अंदर रखने के लिए |
| छाया के साथ लिफ्ट | नहीं | एलिमेंटर के पास इसके लिए कोई सेटिंग नहीं है |
| डार्क ओवरले | नहीं, छवि विजेट पर | जब तक आप छवि को एक कंटेनर में लपेटते हैं, तब तक इसकी आवश्यकता है |
| स्लाइडिंग कैप्शन | नहीं | जब तक आप होवर विजेट का उपयोग नहीं करते तब तक इसकी आवश्यकता है |
अंतर्निहित सेटिंग्स को चरण दर चरण कवर किया गया है एलिमेंटर में इमेज होवर प्रभाव कैसे जोड़ें। सामान्य तकनीक का दस्तावेजीकरण किया गया है एमडीएन का पेज ः होवर छद्म वर्ग के लिए.
नो-कोड मार्ग
सीएसएस तस्वीर पर ही सरल प्रभाव सूट करता है एक बार जब आप एक शीर्षक और एक विवरण चाहते हैं जो छवि पर चेतन होता है, तो सीएसएस जल्दी से बढ़ता है, और आपको इसे हर डिजाइन परिवर्तन पर बनाए रखना होगा।
मास्टर ऐडऑन में इमेज होवर इफेक्ट्स विजेट उसे ड्रॉपडाउन से बदल देता है। इसमें 30 प्रभाव, प्रत्येक छवि के लिए एक शीर्षक और विवरण और रंगों और प्रकार के लिए स्टाइल टैब नियंत्रण हैं।
उन्हें लाइव देखें। द छवि होवर प्रभाव विजेट पृष्ठ होवर करने के लिए आठ कार्ड और सभी ३० प्रभावों की एक तालिका है।
अक्सर पूछे जाने वाले प्रश्न
मैं एलिमेंटर में एक छवि में सीएसएस होवर प्रभाव कैसे जोड़ूं?
छवि विजेट का चयन करें, उन्नत टैब खोलें और सीएसएस कक्षाओं में एक वर्ग का नाम टाइप करें फिर उस वर्ग के लिए एक सीएसएस नियम जोड़ें: होवर, उदाहरण के लिए। होवर-ज़ूम: होवर आईएमजी {रूपांतरण: स्केल (१.०८);} सीएसएस को एलिमेंटर प्रो के कस्टम सीएसएस में या उपस्थिति, अनुकूलित, अतिरिक्त सीएसएस में चिपकाएं।
मैं प्रो के बिना एलिमेंटर में कस्टम सीएसएस कहां रखूं?
वर्डप्रेस डैशबोर्ड में उपस्थिति, अनुकूलित, अतिरिक्त सीएसएस पर जाएं और इसे वहां पेस्ट करें सीएसएस हर पृष्ठ पर लोड होता है, इसलिए मिलान वर्ग के साथ कोई भी विजेट इसे उठाता है एक ऐडऑन से एक कस्टम सीएसएस एक्सटेंशन एक और विकल्प है।
मेरा सीएसएस होवर प्रभाव एलिमेंट में काम क्यों नहीं कर रहा है?
सामान्य कारण सीएसएस क्लासेस फ़ील्ड में टाइप किया गया एक डॉट है, एक वर्ग का नाम जो सीएसएस से मेल नहीं खाता है, या एक कैश्ड स्टाइलशीट बिना डॉट के क्लास टाइप करें, वर्तनी की तुलना करें, फिर टूल्स के तहत अपने कैश प्लगइन और एलिमेंट की फ़ाइलों को साफ़ करें।
क्या मैं होवर पर एक छवि ज़ूम कर सकता हूं, बिना इसे ओवरफ्लो किए?
हाँ। ओवरफ़्लो को विजेट पर छिपाकर सेट करें जो क्लास को ले जाता है और उसके अंदर आईएमजी को स्केल करता है विजेट अपना आकार रखता है और बढ़ी हुई छवि को क्लिप करता है इस गाइड में पहला स्निपेट ऐसा करता है।
क्या सीएसएस होवर प्रभाव मोबाइल पर काम करते हैं?
फोन में कोई होवर राज्य नहीं है, इसलिए प्रभाव या तो कभी भी नल के बाद नहीं दिखाता है या दिखाता है और तब तक रहता है जब तक आगंतुक कहीं और टैप नहीं करता है होवर प्रभाव को छोटी स्क्रीन पर सजावट के रूप में मानें और उनके बिना किसी भी महत्वपूर्ण पाठ को दृश्यमान रखें।
अंतिम विचार
एलिमेंटर में सीएसएस छवि होवर प्रभाव को छवि विजेट और एक छोटे नियम पर एक वर्ग की आवश्यकता होती है यहां पांच कवर ज़ूम, रंग, लिफ्ट, ओवरले और एक स्लाइडिंग कैप्शन, और प्रत्येक को एक या दो मानों को बदलकर समायोजित किया जा सकता है।
जब आप जो प्रभाव चाहते हैं उसमें छवि पर पाठ शामिल होता है, तो छवि होवर प्रभाव विजेट सीएसएस बनाए रखने के बिना आपको वहां ले जाता है।
संबंधित पढ़ने
