👨‍👨‍👧‍👦 👃 👁‍🗨 CSS3 के साथ मूल होवर प्रभाव बनाएं ✌🏻 👨🏽‍🎤 🕵🏿

CSS3 की शक्ति जबरदस्त है और इस ट्यूटोरियल में आप देख सकते हैं कि इसका रचनात्मक उपयोग कैसे किया जा सकता है। हम CSS3 बदलावों का उपयोग करके कुछ माउसओवर प्रभाव बनाने जा रहे हैं। जब आप एक थंबनेल पर होवर करते हैं, तो थंबनेल का विवरण प्रदर्शित किया जाएगा, प्रत्येक उदाहरण में विभिन्न शैलियों का उपयोग करते हुए।

कृपया ध्यान दें कि ये उदाहरण केवल आधुनिक ब्राउज़रों में सही ढंग से काम करेंगे जो CSS3 के गुणों का समर्थन करते हैं।

HTML मार्कअप

मार्कअप संरचना बहुत सरल और सहज है। एक कंटेनर बनाएं जिसमें एक छवि और कोई अन्य जानकारी होगी, जैसे कि शीर्षक, विवरण, और बहुत कुछ।

व्यू क्लास के साथ ब्लॉक के अंदर, मास्क क्लास के साथ एक तत्व डालें, जो हमारे CSS3 प्रभावों के लिए जिम्मेदार होगा, इसके अंदर हम नाम, विवरण और लिंक को पूरी छवि पर रखेंगे। (कुछ उदाहरणों के लिए, हमें मास्क को एक अलग तत्व के रूप में जोड़ना होगा और विवरण को सामग्री वर्ग के साथ एक div में लपेटना होगा।)

<div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </div>

सीएसएस

मार्कअप बनाने के बाद, हम अपनी शैली बनाएंगे।

हम अपनी शैलियों के लिए सामान्य नियम स्थापित करेंगे, और फिर हम वांछित प्रभावों के साथ विशेष कक्षाएं जोड़ेंगे। इस लेख में, हम विभिन्न ब्राउज़रों के लिए सीएसएस उपसर्गों को छोड़ देंगे, लेकिन आप उन्हें स्रोत में देख सकते हैं।

 .view { width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center } .view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0 } .view img { display: block; position: relative } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 } .view p { font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000 } .view a.info:hover { box-shadow: 0 0 5px #000 }

और अब हम दस प्रभावों को देखेंगे।

उदाहरण 1

इस प्रभाव के लिए दृश्य वर्ग के साथ तत्व में एक विशेष दृश्य-प्रथम वर्ग जोड़ें। हम दृश्य तत्व (दृश्य-प्रथम, दृश्य-द्वितीय, दृश्य-तृतीय, आदि) के प्रत्येक उदाहरण के लिए एक विशेष वर्ग जोड़ेंगे।

 <div class="view view-first"> </div>

पहले उदाहरण में, हम एक अच्छा होवर प्रभाव बनाने के लिए केवल कुछ बुनियादी बदलावों का उपयोग करेंगे:

 .view-first img { transition: all 0.2s linear; } .view-first .mask { opacity: 0; background-color: rgba(219,127,8, 0.7); transition: all 0.4s ease-in-out; } .view-first h2 { transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info{ opacity: 0; transition: all 0.2s ease-in-out; }

और अब हमारे प्रभाव के बारे में सबसे दिलचस्प बात। जब हम छवि पर कर्सर ले जाते हैं, तो हम एक साधारण एनीमेशन का अनुकरण करने के लिए देरी संपत्ति का उपयोग कर सकते हैं। संक्रमण-विलंब जो हम हॉवर पर उपयोग करते हैं, उन्हें सामान्य वर्ग से भिन्न करने के लिए बदला जा सकता है। इस उदाहरण में, हमने नियमित कक्षा में किसी भी देरी का उपयोग नहीं किया, लेकिन हमने देरी को हॉवर में जोड़ा, जिससे संक्रमण का प्रभाव थोड़ा कम हो जाएगा।

 .view-first:hover img { transform: scale(1.1); } .view-first:hover .mask { opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; }

उदाहरण 2

दूसरे उदाहरण में, हम एक विशेष दृश्य-द्वितीय श्रेणी जोड़ेंगे, लेकिन हम तत्व को मास्क वर्ग के साथ खाली छोड़ देंगे और विवरण को सामग्री वर्ग के साथ एक div में लपेटेंगे।

 <div class="view view-second"> <img src="images/5.jpg" /> <div class="mask"></div> <div class="content"> <h2>Hover Style #2</h2> <p>Some description</p> <a href="#" class="info">Read More</a> </div> </div>

यहां मुखौटा वर्ग में विभिन्न विशेषताएं होंगी, विशेष रूप से हम परिवर्तन संपत्ति (अनुवाद और घुमाएँ) लागू करने जा रहे हैं। तत्वों का विवरण स्थानांतरित किया जाएगा ताकि हम उन्हें एक साथ मंडराने पर स्थानांतरित कर सकें:

 .view-second img { transition: all 0.2s ease-in; } .view-second .mask { background-color: rgba(115,146,184, 0.7); width: 300px; padding: 60px; height: 300px; opacity: 0; transform: translate(265px, 145px) rotate(45deg); transition: all 0.2s ease-in-out; } .view-second h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: translate(200px, -200px); transition: all 0.2s ease-in-out; } .view-second p { transform: translate(-200px, 200px); transition: all 0.2s ease-in-out; } .view-second a.info { transform: translate(0px, 100px); transition: all 0.2s 0.1s ease-in-out; }

हमारे होवर प्रभाव के लिए, हम अपने तत्वों को स्थान पर स्थानांतरित करने के लिए अनुवाद परिवर्तन का उपयोग करते हैं। मुखौटा भी घूम जाएगा। विवरण तत्व थोड़ी देरी से आगे बढ़ेंगे:

 .view-second:hover .mask { opacity:1; transform: translate(-80px, -125px) rotate(45deg); } .view-second:hover h2 { transform: translate(0px,0px); transition-delay: 0.3s; } .view-second:hover p { transform: translate(0px,0px); transition-delay: 0.4s; } .view-second:hover a.info { transform: translate(0px,0px); transition-delay: 0.5s; }

उदाहरण 3

तीसरे उदाहरण में, हम ट्रांसफॉर्म और रोटेट ट्रांसफॉर्म का उपयोग करेंगे:

 .view-third img { transition: all 0.2s ease-in; } .view-third .mask { background-color: rgba(0,0,0,0.6); opacity: 0; transform: translate(460px, -100px) rotate(180deg); transition: all 0.2s 0.4s ease-in-out; } .view-third h2{ transform: translateY(-100px); transition: all 0.2s ease-in-out; } .view-third p { transform: translateX(300px) rotate(90deg); transition: all 0.2s ease-in-out; } .view-third a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out; }

होवर करते समय उपयोग करने के लिए ये सरल निर्देश हैं। अब हम तदनुसार संक्रमण-विलंब निर्धारित करके तत्वों के विवरण को उल्टा करेंगे:

 .view-third:hover .mask { opacity:1; transition-delay: 0s; transform: translate(0px, 0px); } .view-third:hover h2 { transform: translateY(0px); transition-delay: 0.5s; } .view-third:hover p { transform: translateX(0px) rotate(0deg); transition-delay: 0.4s; } .view-third:hover a.info { transform: translateY(0px); transition-delay: 0.3s; }

उदाहरण 4

चौथे उदाहरण में, हम एक साधारण छवि में कमी करेंगे और रोटेशन के साथ अपनी सामग्री को बढ़ाएंगे, सभी पैमाने रूपांतरण के लिए धन्यवाद। हम छवि शैलियों के लिए संक्रमण-विलंब को 0.2 पर सेट करेंगे, लेकिन होवर पर हम इसे 0 एस में बदल देंगे। यह आपको माउस को हॉवर करने के तुरंत बाद एनीमेशन शुरू करने की अनुमति देगा, लेकिन कर्सर के चले जाने पर इसमें देरी होगी।

 .view-fourth img { transition: all 0.4s ease-in-out 0.2s; opacity: 1; } .view-fourth .mask { background-color: rgba(0,0,0,0.8); opacity: 0; transform: scale(0) rotate(-180deg); transition: all 0.4s ease-in; border-radius: 0px; } .view-fourth h2{ opacity: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transition: all 0.5s ease-in-out; } .view-fourth p { opacity: 0; transition: all 0.5s ease-in-out; } .view-fourth a.info { opacity: 0; transition: all 0.5s ease-in-out; }

यह इस प्रभाव को प्राप्त करने के लिए निर्देश हैं - आप CSS3 :) के साथ सब कुछ कर सकते हैं।

 .view-fourth:hover .mask { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 0.2s; } .view-fourth:hover img { transform: scale(0); opacity: 0; transition-delay: 0s; } .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info{ opacity: 1; transition-delay: 0.5s; }

उदाहरण 5

इस पाँचवें उदाहरण में, हम ट्रांसफ़ॉर्मेशन-टाइमिंग-फंक्शन आसानी के साथ-साथ ट्रांसलेशन प्रॉपर्टी का उपयोग बाईं ओर की सामग्री को शिफ्ट करने के लिए करेंगे।

 .view-fifth img { transition: all 0.3s ease-in-out; } .view-fifth .mask { background-color: rgba(146,96,91,0.3); transform: translateX(-300px); opacity: 1; transition: all 0.4s ease-in-out; } .view-fifth h2{ background: rgba(255, 255, 255, 0.5); color: #000; box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5); } .view-fifth p{ opacity: 0; color: #333; transition: all 0.2s linear; }

हॉवर प्रभाव छवि को दाईं ओर स्थानांतरित कर देगा और विवरण बाईं ओर दिखाई देगा, जैसे कि उसने चित्र को स्थानांतरित कर दिया था:

 .view-fifth:hover .mask { transform: translateX(0px); } .view-fifth:hover img { transform: translateX(300px); transition-delay: 0.1s; } .view-fifth:hover p{ opacity: 1; transition-delay: 0.4s; }

उदाहरण 6

इस उदाहरण में, हम सामने दिखने वाले विवरण को बनाएंगे, छवि को उसके मूल आकार में घटाएंगे (10 से 1 के पैमाने पर)। "अधिक पढ़ें" बटन नीचे दिखाई देगा (अनुवाद)।

 .view-sixth img { transition: all 0.4s ease-in-out 0.5s; } .view-sixth .mask{ background-color: rgba(146,96,91,0.5); opacity:0; transition: all 0.3s ease-in 0.4s; } .view-sixth h2{ opacity:0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(10); transition: all 0.3s ease-in-out 0.1s; } .view-sixth p { opacity:0; transform: scale(10); transition: all 0.3s ease-in-out 0.2s; } .view-sixth a.info { opacity:0; transform: translateY(100px); transition: all 0.3s ease-in-out 0.1s; }

रिवर्स संक्रमण में देरी होगी ताकि यह चिकना दिखे:

 .view-sixth:hover .mask { opacity:1; transition-delay: 0s; } .view-sixth:hover img { transition-delay: 0s; } .view-sixth:hover h2 { opacity: 1; transform: scale(1); transition-delay: 0.1s; } .view-sixth:hover p { opacity:1; transform: scale(1); transition-delay: 0.2s; } .view-sixth:hover a.info { opacity:1; transform: translateY(0px); transition-delay: 0.3s; }

उदाहरण 7

सातवें उदाहरण में, विचार छवि को केंद्र में घुमाने और इसे दूरी पर ले जाने के लिए है। फिर एक विवरण प्रकट होता है, घूर्णन छवि को छिपाता है।

 .view-seventh img{ transition: all 0.5s ease-out; opacity: 1; } .view-seventh .mask { background-color: rgba(77,44,35,0.5); transform: rotate(0deg) scale(1); opacity: 0; transition: all 0.3s ease-out; transform: translateY(-200px) rotate(180deg); } .view-seventh h2{ transform: translateY(-200px); transition: all 0.2s ease-in-out; } .view-seventh p { transform: translateY(-200px); transition: all 0.2s ease-in-out; } .view-seventh a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out; }

जब मँडराते हैं, तो हम विवरण के साथ तत्वों के लिए देरी जोड़ देंगे। यह हमें विवरण को छिपाने से पहले घूर्णन छवि को देखने की अनुमति देगा। रिवर्स संक्रमण में, सब कुछ तुरंत गायब हो जाएगा, और हम छवि को विपरीत दिशा में घुमाते हुए देखेंगे:

 .view-seventh:hover img{ transform: rotate(720deg) scale(0); opacity: 0; } .view-seventh:hover .mask { opacity: 1; transform: translateY(0px) rotate(0deg); transition-delay: 0.4s; } .view-seventh:hover h2 { transform: translateY(0px); transition-delay: 0.7s; } .view-seventh:hover p { transform: translateY(0px); transition-delay: 0.6s; } .view-seventh:hover a.info { transform: translateY(0px); transition-delay: 0.5s; }

उदाहरण 8

आठवें उदाहरण में, हम एनीमेशन का उपयोग करेंगे और उछाल प्रभाव को फिर से बनाएंगे। विवरण नीचे से नीचे जाएगा और नीचे की सीमा से उछल जाएगा।

 .view-eighth .mask { background-color: rgba(255, 255, 255, 0.7); top: -200px; opacity: 0; transition: all 0.3s ease-out 0.5s; } .view-eighth h2{ transform: translateY(-200px); transition: all 0.2s ease-in-out 0.1s; } .view-eighth p { color: #333; transform: translateY(-200px); transition: all 0.2s ease-in-out 0.2s; } .view-eighth a.info { transform: translateY(-200px); transition: all 0.2s ease-in-out 0.3s; }

हम मुखौटा तत्व के लिए एनीमेशन जोड़ेंगे और विवरण तत्वों के लिए कुछ देरी सेटिंग्स को परिभाषित करेंगे:

 .view-eighth:hover .mask { opacity: 1; top: 0px; transition-delay: 0s; animation: bounceY 0.9s linear; } .view-eighth:hover h2 { transform: translateY(0px); transition-delay: 0.4s; } .view-eighth:hover p { transform: translateY(0px); transition-delay: 0.2s; } .view-eighth:hover a.info { transform: translateY(0px); transition-delay: 0s; }

वास्तविक उछाल प्रभाव को फिर से बनाने के लिए, हम अनुवाद का उपयोग करेंगे, क्योंकि आप देख सकते हैं कि कई फ्रेम हैं जो इस प्रभाव को बनाते हैं:

 @keyframes bounceY { 0% { transform: translateY(-205px);} 40% { transform: translateY(-100px);} 65% { transform: translateY(-52px);} 82% { transform: translateY(-25px);} 92% { transform: translateY(-12px);} 55%, 75%, 87%, 97%, 100% { transform: translateY(0px);} }

उदाहरण 9

इस उदाहरण में, हम निचले दाएं और ऊपरी बाएं कोनों से उन्हें स्थानांतरित करने के लिए दो मुखौटा तत्वों का उपयोग करेंगे:

 <div class="view view-ninth"> <img src="images/11.jpg" /> <div class="mask mask-1"></div> <div class="mask mask-2"></div> <div class="content"> <h2>Hover Style #9</h2> <p>Some Text</p> <a href="#" class="info">Read More</a> </div> </div>

मास्क तत्वों के अलग-अलग अनुवाद और ट्रांसफ़ोम-मूल मान होंगे। और हम यह भी इंगित करते हैं कि एक ऊपरी सीमा पर संरेखित है, और दूसरा तल पर संरेखित है:

 .view-ninth .mask-1,.view-ninth .mask-2{ background-color: rgba(0,0,0,0.5); height: 361px; width: 361px; background: rgba(119,0,36,0.5); opacity: 1; transition: all 0.3s ease-in-out 0.6s; } .view-ninth .mask-1 { left: auto; right: 0px; transform: rotate(56.5deg) translateX(-180px); transform-origin: 100% 0%; } .view-ninth .mask-2 { top: auto; bottom: 0px; transform: rotate(56.5deg) translateX(180px); transform-origin: 0% 100%; } .view-ninth .content{ background: rgba(0,0,0,0.9); height: 0px; opacity: 0.5; width: 361px; overflow: hidden; transform: rotate(-33.5deg) translate(-112px,166px); transform-origin: 0% 100%; transition: all 0.4s ease-in-out 0.3s; } .view-ninth h2{ background: transparent; margin-top: 5px; border-bottom: 1px solid rgba(255,255,255,0.2); } .view-ninth a.info{ display: none; }

जब मँडराते हैं, तो हम सामग्री को ऐसे प्रदर्शित करेंगे जैसे कि दो नकाबपोश तत्वों के नीचे से केंद्र की ओर बढ़ते हुए:

 .view-ninth:hover .content{ height: 120px; width: 300px; opacity: 0.9; top: 40px; transform: rotate(0deg) translate(0px,0px); } .view-ninth:hover .mask-1, .view-ninth:hover .mask-2{ transition-delay: 0s; } .view-ninth:hover .mask-1{ transform: rotate(56.5deg) translateX(1px); } .view-ninth:hover .mask-2 { transform: rotate(56.5deg) translateX(-1px); }

हम मास्क तत्वों के लिए संक्रमण-देरी को इस तरह से निर्धारित करते हैं कि जब हम कर्सर को स्थानांतरित करते हैं, तो संक्रमण तुरंत होता है, लेकिन जब माउस निकलता है, तो देरी अधिक होगी।

उदाहरण १०

अंतिम उदाहरण में, हम छवि को बड़ा करेंगे, और फिर छिपाएंगे, वर्णन को सामने लाएंगे। हम एक पैमाने पर परिवर्तन का उपयोग करके और पारदर्शिता स्तर को समायोजित करके ऐसा कर सकते हैं:

 .view-tenth img { transform: scaleY(1); transition: all 0.7s ease-in-out; } .view-tenth .mask { background-color: rgba(255, 231, 179, 0.3); transition: all 0.5s linear; opacity: 0; } .view-tenth h2{ border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; } .view-tenth p { color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; }

जब आप होवर करते हैं, तो हम केवल छवि को मापते हैं, लेकिन इसे क्यों छिपाते हैं, इसकी पारदर्शिता को कम करते हुए 0:

 .view-tenth:hover img { transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info{ transform: scale(1); opacity: 1; }

निष्कर्ष

सुंदर प्रभाव बनाने के लिए CSS3 में वास्तव में बहुत संभावनाएं हैं। जल्द ही, उम्मीद है, हम सरल प्रभाव बनाने और सभी ब्राउज़रों में सीएसएस पर 100% भरोसा करने के लिए जावास्क्रिप्ट का उपयोग करने से बचने में सक्षम होंगे।

मुझे आशा है कि आपने इन प्रयोगों का आनंद लिया है, लेकिन सबसे पहले मुझे आशा है कि वे आपको अपना प्रभाव बनाने के लिए प्रेरित कर सकते हैं।

नमूना फ़ाइलें डाउनलोड करें

PS यह लेख मैरी लू के लेख की तार्किक निरंतरता है

CSS3 के साथ मूल होवर प्रभाव बनाएं

HTML मार्कअप

सीएसएस

निष्कर्ष

More articles: