सीएसएस के साथ होवर पर तत्वों को ज़ूम/स्केल अप कैसे करें

transform . का उपयोग करके शुद्ध CSS के साथ होवर पर तत्वों को ज़ूम/स्केल-अप करना सीखें संपत्ति की परिवर्तन विधि:scale() ।

होवर पर ज़ूम/स्केल-अप करें

अपने माउस को इस बॉक्स के ऊपर ले जाने का प्रयास करें:

यह मूल आकार से ठीक 1.5 गुना बड़ा हो जाता है - इसलिए जब आप अपने माउस को इसके ऊपर (होवर) करते हैं तो यह 50% बड़ा हो जाता है।

सीएसएस transform संपत्ति की स्केल विधि तत्वों के आकार को बढ़ा या घटा सकती है। यह 3डी और 2डी दोनों में काम करता है। इस सरल उदाहरण में, हम 2D का उपयोग करते हैं।

ऊपर दिए गए उदाहरण को फिर से बनाने के लिए, हमें 1 HTML तत्व और 2 CSS नियम-सेट चाहिए।

HTML

पहले zoom-box . नामक एक वर्ग के साथ अपना HTML तत्व बनाएं :

<div class="zoom-box"></div>

सीएसएस

फिर इस CSS को अपनी स्टाइलशीट में जोड़ें:

.zoom-box {
  background-color:#CF4B32;
  width: 100px;
  height: 100px;
  margin: 32px auto;
  transition: transform .2s; /* Animation */
}

.zoom-box:hover {
  transform: scale(1.5);
}

इतना ही!

कोड कैसे काम करता है

• सबसे पहले, हम zoom-box . नामक क्लास एट्रिब्यूट के साथ एक HTML div एलिमेंट बनाते हैं ।
• फिर हम ज़ूम बॉक्स वर्ग के लिए दो नियम-सेट बनाते हैं, एक स्थिर डिफ़ॉल्ट स्थिति के लिए, .zoom-box और एक गतिशील होवर स्थिति के लिए, .zoom-box:hover ।
• पहले नियम-सेट में कुछ कॉस्मेटिक/आकार के गुण होते हैं (height, width, color ) margin संपत्ति केवल बॉक्स को मध्य संरेखित करने के लिए है (वैकल्पिक)।
• .zoom-box का महत्वपूर्ण भाग वर्ग transition है transform . के मान वाली संपत्ति और .2s . की अवधि (200 मिलीसेकंड)।
• दूसरे नियम-सेट में .zoom-box:hover हम transform जोड़ते हैं संपत्ति, scale() . के साथ मूल्य के रूप में विधि। यह एक पैरामीटर लेता है 1.5 जो यह निर्धारित करता है कि होवर पर बॉक्स तत्व को कितना बड़ा करना चाहिए। 1.5 मूल आकार का 150% कहने जैसा है।

ब्राउज़र संगतता

यहाँ इस ट्यूटोरियल का कोड जोड़ा गया ब्राउज़र वेंडर उपसर्ग के साथ दिया गया है, इसलिए यह सभी मुख्यधारा के ब्राउज़रों, क्रोम, फ़ायरफ़ॉक्स, सफारी, ओपेरा में काम करता है:

.zoom-box {
	background-color: #cf4b32;
	width: 100px;
	height: 100px;
	margin: 32px auto;
	-webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s; /* Animation */
}

.zoom-box:hover {
	-webkit-transform: scale(1.5);
	        transform: scale(1.5);
}

जानना अच्छा है

ध्यान दें कि बॉक्स तत्व एक ही संक्रमण अवधि/समय के साथ ऊपर और नीचे होता है, भले ही हमने केवल transition जोड़ा हो .zoom-box . के लिए संपत्ति कक्षा।

ऐसा इसलिए होता है क्योंकि जब transition संपत्ति को मूल वर्ग चयनकर्ता में जोड़ा जाता है (.zoom-box ), इसके मान स्वचालित रूप से वर्ग से जुड़े प्रत्येक अतिरिक्त चयनकर्ता में जुड़ जाते हैं, इस मामले में, यह :hover है (इसे छद्म वर्ग . भी कहा जाता है )

यदि आप केवल transition जोड़ते हैं :hover . के लिए संपत्ति (छद्म) चयनकर्ता वर्ग, तो यह केवल स्केल-अप भाग को एनिमेट करता है - स्केल डाउन नहीं। जैसे ही आप बॉक्स एलिमेंट से बाहर जाते हैं, यह अचानक शून्य (0s) अवधि के साथ कम हो जाता है - जो आप शायद ही कभी चाहते हैं, क्योंकि यह आंखों के लिए कठोर है।

यदि आप अपने तत्व के विभिन्न राज्यों (ऊपर/नीचे) पर विभिन्न एनीमेशन प्रकारों और अवधि का उपयोग करना चाहते हैं, तो आप बस एक transition जोड़ें :hover . के लिए संपत्ति छद्म वर्ग चयनकर्ता, और इसे अलग-अलग मान दें।