बेहतर छवि हॉवर प्रभाव के लिए 10 सीएसएस पुस्तकालय

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

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

इस संकलन में, हैं 250 से अधिक हॉवर प्रभाव आपको प्रेरित करने के लिए। आप स्रोत पर कोड भी उठा सकते हैं.

छवि हॉवर प्रभाव (16 प्रभाव)

इस पृष्ठ में आपको कैप्शन के साथ 16 होवर इमेज इफेक्ट्स का अच्छा संग्रह मिलेगा। छवियों पर मँडरा करके प्रत्येक प्रभाव के लिए HTML और CSS कोड को पकड़ो, फिर क्लिक करें कोड दिखाएं.

छवि कैप्शन हॉवर एनीमेशन (4 प्रभाव)

यहाँ 4 शांत कैप्शन एनिमेशन हैं जो एक छवि पर हो जाने पर चलते हैं। प्रभाव शुद्ध CSS3 संक्रमण और परिवर्तन के साथ बनाया गया है, और कोई जावास्क्रिप्ट, ब्राउज़र भर में संगतता बढ़ाने के लिए.

iHover (35 प्रभाव)

iHover CSS3 द्वारा संचालित होवर प्रभावों का एक संग्रह है। 20 सर्कल हॉवर प्रभाव और 15 वर्ग हॉवर प्रभाव हैं। प्रभावों का उपयोग करने के लिए, आपको कुछ HTML मार्कअप लिखने और CSS फाइलों को शामिल करने की आवश्यकता होगी.

छवि हॉवर (44 प्रभाव)

इस लाइब्रेरी में शुद्ध सीएसएस के साथ 44 प्रभाव हैं। कुछ प्रभावों में कई दिशाओं में फ़ेड, पुश, स्लाइड, टिका, खुलासा, ज़ूम, ब्लर्स, फ़्लिप, फ़ॉल्डर्स और शटर शामिल हैं। 216 प्रभावों का एक विस्तारित संस्करण है जिसे € 14 के लिए खरीदा जा सकता है.

हॉवर प्रभाव विचार (30 प्रभाव)

कोड्रोप द्वारा बनाई गई यह छवि होवर डेमो, आपको छवियों और इसके कैप्शन के बीच चिकनी बदलाव करते समय प्रेरणा देती है। ट्यूटोरियल और स्रोत कोड के साथ दो सेटों पर कुल 30 प्रभाव हैं.

होवर सीएसएस (108 प्रभाव)

होवर सीएसएस आपको किसी भी तत्व जैसे बटन, लिंक या छवि में होवर प्रभाव जोड़ने देता है। प्रभाव 2 डी संक्रमण, पृष्ठभूमि संक्रमण, सीमा, छाया और चमक संक्रमण और अधिक शामिल हैं। पुस्तकालय CSS, Sass और LESS में उपलब्ध है.

प्राणवाद (100+ प्रभाव)

बटन, ओवरले, विवरण, कैप्शन, चित्र और सोशल मीडिया बटन के लिए 100 से अधिक छवि होवर एनिमेशन हैं। सभी प्रभाव CSS3 द्वारा संचालित हैं.

कैप्शन हॉवर इफेक्ट (7 प्रभाव)

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

सीएसएस छवि हॉवर प्रभाव (15 प्रभाव)

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

दिशा-जागरूक 3 डी होवर प्रभाव

यह एक सुपर कूल हॉवर प्रभाव है जो आपके अंतिम माउस आंदोलन का पता लगाएगा। आपकी पिछली कर्सर स्थिति के आधार पर चार दिशाओं में से एक से छवि के कैप्शन खुलेंगे.

होवर एनिमेशन

यहाँ UNIQLO से प्रेरित एक बॉर्डर होवर एनीमेशन है। एक हॉवर ईवेंट पर, छवि की सीमा एनिमेटेड हो जाएगी.

एनिमेटेड हॉवर के साथ टाइलें

टाइल डिजाइन के लिए एक, यह धीमी गति से ज़ूम, स्लाइड, पॉप-इन, दूसरों के बीच मंद ओवरले की सुविधा देता है.

एसवीजी क्लिप-पथ हॉवर प्रभाव

एसवीजी द्वारा संचालित एक सुपर भयानक एक्स-रे स्पॉटलाइट इमेज होवर प्रभाव क्लिप-पथ और सीएसएस संक्रमण। क्रोम, ओपेरा और सफारी पर ठीक काम करता है.