يمكن أن يؤدي تأثير التمرير على الصور إلى جعل المحتوى الخاص بك أكثر جاذبية وتفاعلية. في هذا البرنامج التعليمي، سنرشدك إلى كيفية إنشاء تأثير تدوير التمرير البسيط والملفت للنظر باستخدام HTML وCSS فقط.

كيفية إنشاء التأثير

HTML:

أولاً، قم بإضافة كود HTML التالي:

يمكنك إضافة أي صورة تريدها.

يقوم هذا الكود بإعداد صورة ملفوفة في علامة مع فئة تدوير التمرير.

CSS:

.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 بتعيين أبعاد الصورة وإخفاء أي تجاوز. تتعامل فئة img .hover-rotate مع تأثير الانتقال السلس.

عندما تقوم بالتمرير فوق الصورة، يتم تكبير حجمها بمقدار 1.3 مرة وتدور بمقدار 5 درجات، وذلك بفضل خاصية التحويل.

إذا وجدت هذا البرنامج التعليمي مفيدًا، فلا تتردد في مشاركته مع الآخرين أو ترك تعليق أدناه. لمزيد من النصائح والحيل حول تصميم الويب، تأكد من مراجعة منشوراتنا الأخرى.

قم بزيارة موقع الويب الخاص بي للحصول على المزيد من البرامج التعليمية مثل هذا