كيفية تكبير أو تغيير صورة عند التمرير في العنصر

الوجبات السريعة الرئيسية

• لا يحتوي Elementor على إعداد واحد لتغيير الصورة عند التمرير، لذلك يتم التبديل بخلفية حاوية خلف الصورة أو باستخدام عنصر واجهة مستخدم يقبل صورة ثانية.
• تتمثل الطريقة غير الإضافية لتغيير صورة عند التمرير في Elementor في تعيين الصورة الثانية كخلفية حاوية وتعيين عتامة التمرير لعنصر واجهة المستخدم في الصورة على 0.
• تقوم أداة Master Addons Advanced Image بتبديل الصور بمفتاح واحد، وهو Display Hover Image، الموجود في قسم Hover Image في علامة التبويب "المحتوى".
• يقوم برنامج Elementor's Hover Animation المُعد مسبقًا Grow بتكبير الصورة إلى 110 بالمائة عند التحويم، وتتجاوز الصورة حوافها الأصلية.
• يحتاج التكبير/التصغير الذي يبقى داخل إطاره إلى فئة CSS على عنصر واجهة المستخدم للصورة وثلاث قواعد CSS قصيرة تعمل على قياس الصورة داخل تجاوز مخفي.

لتغيير صورة عند التمرير في Elementor، يمكنك وضع صورة ثانية خلف الصورة الأولى أو داخلها والكشف عنها عند وصول المؤشر. يمكن لـ Elementor القيام بذلك بدون مكون إضافي من خلال خلفية الحاوية، وتقوم أداة الصورة المتحركة بذلك باستخدام مفتاح واحد. يستغرق التكبير/التصغير عند التمرير إعدادًا مسبقًا للتكبير الأساسي، أو بضعة أسطر من CSS للتكبير/التصغير الذي يبقى في إطاره.

تم بناء جميع الطرق الأربع أدناه واختبارها على العنصر 4.3.

أي طريقة للاستخدام

تقوم اثنتان من هذه الطرق بتبديل الصورة واثنتان منها بتكبيرها. داخل كل زوج، يستخدم أحدهما العنصر فقط والآخر أسرع أو أكثر دقة.

قم بتغيير الصورة أثناء التحويم بخلفية الحاوية

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

1. أضف حاوية واضبط حشوتها على 0.
2. في الحاوية أسلوب علامة التبويب، فتح خلفية، اختر Classic وقم بتحميل الصورة التي يجب أن تظهر عند التمرير. اضبط الموضع على المركز الأوسط والحجم المراد تغطيته.
3. اسحب صورة أدخل الأداة في الحاوية واختر الصورة التي يجب أن تظهر أولاً.
4. حدد عنصر واجهة المستخدم للصورة، افتح أسلوب والتحول إلى تحوم علامة تبويب.
5. تعيين التعتيم إلى 0 و مدة الانتقال إلى حوالي 0.4.

استخدم صورتين بنفس النسب. تأخذ الحاوية ارتفاعها من أداة الصورة، لذلك يتم اقتصاص الخلفية ذات الشكل المختلف.

قم بتغيير صورة عند التمرير باستخدام أداة صورة التمرير

تقوم الأداة التي تحتوي على حقل صورة تحوم بنفس التبديل من لوحة واحدة. الخطوات أدناه تستخدم القطعة الصورة المتقدمة من الإضافات الرئيسية.

1. ابحث في لوحة الأدوات عن صورة متقدمة واسحبه إلى الصفحة.
2. في ال صورة القسم، اختر الصورة الرئيسية.
3. افتح ال تحوم الصورة القسم وتشغيله عرض صورة التمرير.
4. اختر الصورة الثانية في الحقل الذي يظهر.
5. معاينة الصفحة والتحليق.

تحتوي الأداة أيضًا على شريط ورابط وصندوق ضوئي يناسب صور المنتج: منظر أمامي أولاً، منظر خلفي عند التمرير، مع شريط جديد في الزاوية.

هل تريد النص على التمرير؟ تأثيرات تحوم الصورة تحريك العنوان والوصف على صورة واحدة، مع 30 تأثيرًا للاختيار من بينها.

قم بتكبير الصورة أثناء التمرير باستخدام الإعداد المسبق Grow

أسرع تكبير هو الإعداد المسبق. حدد عنصر واجهة المستخدم للصورة، افتح أسلوب، قم بالتبديل إلى تحوم علامة التبويب وتعيين تحوم الرسوم المتحركة إلى ينمو. يتم قياس الصورة إلى 110 بالمائة أثناء تجاوز المؤشر لها.

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

قم بتكبير الصورة أثناء التحليق داخل إطارها

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

1. حدد عنصر واجهة المستخدم للصورة وافتح متقدم. في فئات CSS، اكتب hover-zoom.
2. أضف CSS أدناه إلى موقعك.

.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }

يعتمد مكان CSS على الإعداد الخاص بك. يحتوي Elementor Pro على مربع CSS مخصص في علامة التبويب "متقدم". بدونه، استخدم المظهر أو التخصيص أو CSS الإضافي في WordPress أو امتداد CSS مخصص في الإضافات الرئيسية. قم بتغيير 1.08 إلى 1.15 للحصول على تكبير أقوى.

أربعة أشياء تسوء

تأتي معظم مشكلات هذه التأثيرات من أحجام الصور ومن الاختبار على الجهاز الخطأ.

1. الصورتان لهما نسب مختلفة. ثم يقفز المبادلة أو المحاصيل. تصدير كليهما بنفس العرض والارتفاع.
2. تغطي الصورة المكبرة المحتوى القريب. النمو ليس له إطار. استخدم طريقة CSS عندما تكون الصور قريبة من بعضها البعض.
3. لا شيء يحدث على الهاتف. شاشات اللمس ليس لها تحوم. تأكد من أن الصورة الأولى تعمل بمفردها، لأن زوار الهاتف قد لا يرون الصورة الثانية أبدًا.
4. صورة التحويم ثقيلة. اضغط على كلا الملفين، لأن الصورة الثانية الكبيرة يمكن أن تظهر كفلاش فارغ في التحويم الأول.

الأسئلة المتداولة

الأفكار النهائية

لتغيير صورة عند التمرير في Elementor، استخدم خلفية حاوية تحتوي على عنصر واجهة مستخدم صورة باهتة، أو عنصر واجهة مستخدم يحتوي على حقل صورة التمرير. للتكبير/التصغير، استخدم Grow للحصول على نتيجة سريعة وفئة CSS عندما يجب أن تظل الصورة في إطارها.

ال القطعة الصورة المتقدمة يتعامل مع المبادلة في لوحة واحدة، و تأثيرات تحوم الصورة يغطي تراكبات النص.

القراءة ذات الصلة

• منزلق مقارنة الصور Elementor لما قبل وبعد
• نص العنصر فوق الصورة
• صندوق صور العنصر
• كيفية إضافة تأثيرات تحويم الصورة في Elementor (3 طرق)
• 30 تأثير تحويم الصورة لـ Elementor