पारदर्शी सीमाओं के साथ सीएसएस-ओनली इमेज रिवील इफ़ेक्ट बनाएँ

CSS में, हम उपयोग करते हैं दो सीएसएस चर, --BGC तथा --धुंधला के लिए पृष्ठभूमि का रंग और यह आयाम का .foo कंटेनर, क्रमशः। उदाहरण में, मैंने उपयोग किया एक ही मूल्य चौकोर आकार का बॉक्स पाने के लिए चौड़ाई और ऊंचाई के लिए, बनाएं अलग चर यदि आप आयताकार चाहते हैं तो ऊंचाई और चौड़ाई के लिए.

हम भी जोड़ते हैं स्थिति: रिश्तेदार शासन करना .foo, ताकि इसके छद्म तत्व, कि हम उपयोग करने वाले हैं छवि का खुलासा, हो सकता है बिल्कुल तैनात (नीचे देखें), और इस प्रकार एक दूसरे पर ढेर.

 .foo --bgc: # FFCC03; --dim: 300px; चौड़ाई: var (- मंद); ऊँचाई: var (- मंद); पृष्ठभूमि-रंग: var (- bgc); स्थिति: रिश्तेदार;  

हम एक खाली जोड़ें सामग्री संपत्ति दोनों छद्म तत्वों के लिए, .foo :: से पहले तथा .foo :: के बाद, उन्हें ठीक से प्रदान करने के लिए.

 .foo :: इससे पहले .foo :: के बाद सामग्री: "; स्थिति: निरपेक्ष; बाएं: 0; शीर्ष: 0;; 

.foo तत्व, इसके दो छद्म तत्व, .foo :: से पहले, .foo :: के बाद, और उनका : मंडराना छद्म कक्षाएं प्राप्त संक्रमण संपत्ति वो होगा एक आसानी से संक्रमण जोड़ें उनके लिए 500 मिलीसेकंड (आधा सेकंड).

 .foo, .foo: hover, .foo :: से पहले, .foo :: के बाद, .foo:।  

2. छवि जोड़ें

हम छवि को इसमें जोड़ते हैं .foo :: से पहले छद्म तत्व पृष्ठभूमि छवि के रूप में, तथा पूरे छद्म तत्व को कवर करने के लिए इसे आकार दें उसके साथ चौड़ाई तथा ऊंचाई गुण। हम इसके ठीक नीचे ढेर .foo तत्त्व का उपयोग करते हुए z- इंडेक्स: -1 नियम.

 .foo :: चौड़ाई से पहले: 100%; ऊंचाई: 100%; पृष्ठभूमि: url (camel.png) केंद्र / कवर; z- इंडेक्स: -1;  

केंद्र कीवर्ड छवि को केंद्र में रखता है, जबकि आवरण कीवर्ड छवि को स्केल करता है पूरे तत्व को कवर करें अपने पहलू अनुपात को बनाए रखते हुए.

पर नीचे स्क्रीनशॉट आप देख सकते हैं कि हमारे पास अब तक क्या है (z- सूचकांक से निकाल दिया गया है .foo :: से पहले ताकि यह देखा जा सके):

3. स्लाइड-आउट पृष्ठभूमि जोड़ें

को जोड़ने के लिए छवि के पीछे छोटी (स्लाइड-आउट) पृष्ठभूमि, हम दूसरे छद्म तत्व का उपयोग करेंगे, .foo :: के बाद.

हम एक और CSS वैरिएबल बनाते हैं, --ख, के लिए सीमा चौड़ाई. हम देते हैं तीन पारदर्शी सीमाएँ को ::बाद छद्म तत्व: ऊपर, दाएँ, और नीचे.

 .foo :: के बाद --b: 20px; चौड़ाई: कैल्क (100% - var (- बी)); ऊंचाई: कैल्क (100% - कैल्क (संस्करण - (बी) * 2)); सीमा: var (- b) ठोस पारदर्शी; सीमा-वाम: कोई नहीं; बॉक्स-छाया: इनसेट 0 var (- मंद) 0 var (- bgc); फ़िल्टर: चमक (.8); z- इंडेक्स: -2;  

चौड़ाई के रूप में गणना की जाती है कैल्क (100% - var - b)) वह लौटता है की कुल चौड़ाई .foo अपनी क्षैतिज सीमाओं की कुल चौड़ाई को घटाता है (दाएं बॉर्डर केवल इसलिए, क्योंकि वहां बॉर्डर नहीं है).

ऊंचाई के रूप में गणना की जाती है calc (100% - calc (var (- b) * 2)) वह लौटता है की कुल ऊंचाई .foo इसकी ऊर्ध्वाधर सीमाओं की कुल चौड़ाई शून्य से (ऊपर और नीचे की सीमाएँ).

उसके साथ डब्बे की छाया संपत्ति, हम भी एक क्षैतिज इनसेट छाया जोड़ें आकार के समान .foo (जो है वर (- मंद)).

का एक सीएसएस फ़िल्टर चमक (.8) पृष्ठभूमि का रंग गहरा करता है थोड़ा सा, और अंत में, द z- इंडेक्स: -2 नियम स्थानों ::बाद छद्म तत्व नीचे :: पहले जिसमें छवि शामिल है.

यहाँ है डेमो का स्क्रीनशॉट अब तक प्रदान (साथ) z- सूचकांक दोनों छद्म तत्वों को हटाया गया ताकि उन्हें देखा जा सके):

4. परिवर्तन जोड़ें

हम जोड़ें परिवर्तन संपत्ति दो छद्म तत्वों के लिए, इसलिए जब उपयोगकर्ता ओवर हो जाता है .foo, दोनों छद्म तत्व हैं क्षैतिज रूप से चले गए.

जैसे हम पहले से ही जोड़ा गया संक्रमण सभी तत्वों को संपत्ति चरण 1 के अंत में, छवि और इसकी पृष्ठभूमि के आंदोलन हैं दोनों एनिमेटेड.

 .foo: hover :: इससे पहले, .foo: hover :: के बाद ट्रांसफॉर्मेशन: translateX (100%);  

नीचे, आप देख सकते हैं अंतिम डेमो.

बोनस: वैकल्पिक मार्जिन

यदि आप प्रदर्शित करते हैं .foo अन्य तत्वों के बगल में एक पृष्ठ पर और इन अन्य तत्वों को चाहते हैं टलना जब छवि और उसकी पृष्ठभूमि बाहर स्लाइड, तब के रूप में उसी चौड़ाई का एक सही मार्जिन जोड़ें .foo को .foo: मंडराना तत्त्व.

 .फू: होवर मार्जिन-राइट: var (- मंद);