छवियों पर होवर-रोटेट प्रभाव आपकी सामग्री को अधिक आकर्षक और इंटरैक्टिव बना सकता है। इस ट्यूटोरियल में, हम आपको केवल HTML और CSS का उपयोग करके एक सरल लेकिन आकर्षक होवर-रोटेट प्रभाव बनाने के बारे में बताएंगे।

प्रभाव कैसे पैदा करें

एचटीएमएल:

सबसे पहले, निम्नलिखित HTML कोड जोड़ें:

आप अपनी पसंद की कोई भी छवि जोड़ सकते हैं।

यह कोड होवर-रोटेट वर्ग के साथ टैग में लिपटी एक छवि सेट करता है।

सीएसएस:

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}
.hover-rotate img {
  transition: all 0.3s;
  max-width: 100%;
}
.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

यह काम किस प्रकार करता है:

टैग छवि के लिए एक कंटेनर के रूप में कार्य करता है, होवर-रोटेट क्लास को लागू करता है।

.hover-rotate वर्ग छवि के आयाम सेट करता है और किसी भी अतिप्रवाह को छुपाता है। .होवर-रोटेट आईएमजी वर्ग सुचारू संक्रमण प्रभाव को संभालता है।

जब आप छवि पर होवर करते हैं, तो यह 1.3 गुना बढ़ जाती है और 5 डिग्री घूम जाती है, ट्रांसफॉर्मप्रॉपर्टी के लिए धन्यवाद।

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

इस तरह के और ट्यूटोरियल के लिए मेरी वेबसाइट पर जाएँ