تأثيرات تحويم صورة العنصر: 30 حركة متحركة للصور
توجد صورة ثابتة هناك. أضف تأثيرات تحوم الصورة وتبدأ نفس الصورة في القيام ببعض الأعمال: ينزلق العنوان، ويتلاشى الوصف، وترسل النقرة الأشخاص إلى رابط أو تفتح نافذة منبثقة كاملة. تأتي أداة Image Hover Effects لـ Elementor مع 30 رسمًا متحركًا للتحليق (8 في البرنامج الإضافي المجاني و22 أخرى مع Pro) وتقوم بإعدادها دون كتابة سطر من CSS. إنه يناسب الأماكن التي يجب أن تحمل فيها صورة واحدة عنوانًا وتعليقًا توضيحيًا وإجراءً: المحافظ وشبكات الفريق وبطاقات الخدمة وعروض المنتجات.
اختر تأثيرًا، واختر ما تفعله النقرة، وقم بتصميم كل طبقة لتتناسب مع تصميمك. ما ينتهي بك الأمر هو بطاقة صور يتوقف الأشخاص عليها فعليًا بدلاً من التمرير عبرها. يمر الفيديو أدناه عبر كل شيء، ويعرض كل رسوم متحركة، ويستغرق الإعداد بضع دقائق.
ما هي تأثيرات تحويم الصورة؟
تأثير تمرير الصورة هو رسم متحرك ينطلق عندما يحرك شخص ما الماوس فوق صورة. بدلاً من البقاء مسطحًا ، تتفاعل الصورة. يمكن تكبيره أو طمسه أو تغيير لونه أو تحريك لوحة النص إلى العرض. النوع الأكثر شيوعًا هو تراكب الصورة ، حيث يظهر العنوان والوصف كنص على الصورة. سوف تراهم أيضا يسمى تأثيرات تمرير الصورة أو تأثيرات تحوم الصور، وكلها تفعل الشيء نفسه: التقط صورة عادية واجعلها تقرأ كـ “هناك المزيد هنا، انقر فوق me.”
يمكنك بناء كل هذا يدويًا باستخدام CSS المخصص. وهذا يعني كتابة التحولات، وجعلها تتصرف على الهاتف المحمول، والعودة إلى التعليمات البرمجية في كل مرة يتغير فيها التصميم. تتعامل أداة Master Addons معها بشكل مرئي داخل Elementor، حتى تتمكن من الحصول عليها تأثيرات تحوم الصورة البسيطة دون فتح محرر التعليمات البرمجية. إذا كنت تريد رؤية بقية مجموعة الأدوات، فتصفح عناصر واجهة المستخدم والإضافات الرئيسية أو ال ميزات الرسوم المتحركة العنصر.
30 صورة متحركة، 8 منها مجانية
الانطباعات الأولى تحدث عند التمرير. تحصل على مكتبة من الرسوم المتحركة لـ CSS التي تعرض عنوانك ووصفك بسلاسة، بحيث يصل النص بدلاً من مجرد الظهور على الشاشة. قم بتطبيق أي تأثير بنقرة واحدة، ثم قم بالتنقل عبرها في المحرر حتى يناسب المرء الصورة. عادةً ما أحاول تجربة ثلاثة أو أربعة قبل الاستقرار، نظرًا لأن التأثير الذي يبدو رائعًا في لقطة ذات مناظر طبيعية واسعة يمكن أن يبدو وكأنه محصول صورة ضيق.
- التلاشي والتكبير/التصغير: تتلاشى الصورة أو تتوسع بينما يتلاشى النص.
- الشريحة (لأعلى، لأسفل، لليسار، لليمين): تنزلق لوحة التسميات التوضيحية من أي حافة.
- الدفع والكشف: تنتقل الصورة لإفساح المجال للعنوان والوصف.
- تعويم وتألق: مصعد صغير ومسح ضوئي عبر الصورة.
- ثمانية تأثيرات مجانية: ليلي، سادي، روكسي، بوبا، روميو، ليلى، هوني وأوسكار. يضيف Pro 22 آخرين، من Marley إلى Duke.
- يعمل على CSS: تظل الحركة سلسة لأنها لا تعتمد على نصوص ثقيلة.
- سريع الاختبار: قم بتبديل التأثيرات في المحرر وشاهد التغيير على الفور.
أمثلة على تأثير تحوم الصورة
حرك المؤشر فوق كل بطاقة أو اضغط عليه على الهاتف لمعرفة التأثير. هذه الثمانية هي التأثيرات التي تعمل بدون Pro ، وكل بطاقة هي أداة تأثيرات تحوم حول الصورة الحية.
إيلا وسام
سومرست · يونيو
زنبق
اليونان
11 يوما
سادي
الدور الرئيسي
آلات القلب والآلات
اللة طائر
شبح
12400 ميل
شىء فارغ أوبوبي
كليف هاوس
4 أسرة · EPC B
روميو
حائط المعرض
بريستول 2025
سمعة عارمة
المبتدئين تسعة أطباق
حبيبة
ملابس خارجية
87 قطعة
أوسكار
جميع تأثيرات تحوم الصور 30
تسرد القائمة المنسدلة لتأثير التمرير 30 تأثيرًا بالاسم. كل شخص يحرك العنوان والوصف على الصورة ، ويختلفان في كيفية تحرك التراكب والنص والصورة.
| تأثير | يحتاج للمحترفين | تأثير | يحتاج للمحترفين |
|---|---|---|---|
| زنبق | لا | جوليا | نعم |
| سادي | لا | جلاث | نعم |
| اللة طائر | لا | هراوة | نعم |
| شىء فارغ أوبوبي | لا | وينستون | نعم |
| روميو | لا | سلمى فارغ | نعم |
| سمعة عارمة | لا | ثلاثي | نعم |
| حبيبة | لا | فيبي | نعم |
| أوسكار | لا | أبولو | نعم |
| مارلي | نعم | الكيرا شمعدان ث | نعم |
| ياقوتي اللون | نعم | ستيف | نعم |
| ميلو | نعم | موسى | نعم |
| راهب | نعم | موسيقى الجاز | نعم |
| سارة | نعم | مجنون | نعم |
| زود بقرد | نعم | ليكسي | نعم |
| شيكو | نعم | دوق | نعم |
الارتباط الذكي والمحتوى المنبثق عند النقر
عليك أن تقرر ما يحدث عندما ينقر شخص ما على البطاقة. قم بتوجيهه إلى أي عنوان URL باستخدام رابط قياسي، أو باستخدام Pro، قم بتبديل الإجراء إلى Popup وأبقي الأشخاص على الصفحة. لا تقتصر النافذة المنبثقة على النص أيضًا: قم بتعيين نوع المحتوى على القسم المحفوظ ويقوم بسحب أي قالب Elementor قمت بإنشائه بالفعل. يؤدي ذلك إلى تحويل بطاقة صورة واحدة إلى مدخل إلى سيرة ذاتية كاملة، أو ورقة مواصفات المنتج، أو نموذج اتصال، ولا يغادر الزائر الصفحة أبدًا.
- إجراءان للنقر: أرسل حركة المرور عبر رابط، أو أبقِ الأشخاص في الموقع باستخدام نافذة منبثقة (Pro).
- القوالب الحقيقية في النافذة المنبثقة (Pro): إظهار صورة أو نص أو تخطيط كامل من مكتبتك.
- ندف، ثم قل: الصورة هي الخطاف والنافذة تحمل التفاصيل.
النص على الصورة: العنوان والوصف وتصميم التراكب
يمكنك التحكم في كيفية نظر البطاقة إلى التفاصيل. قم بتحميل صورتك وقم بتعيين العتامة والتصفية بشكل منفصل للحالات العادية وحالات التمرير. أضف عنوانًا (اختر علامة HTML الصحيحة حتى تساعد في بنية صفحتك) ووصفًا، ثم قم بتصميم كل قطعة بمفردها بألوانها ونوعها وظلالها وتباعدها.
- عنوان ووصف منفصلان: قم بتصميم كل واحد بحيث يقرأ التسلسل الهرمي بوضوح.
- مرشحات الصور: لا تزال خدعة التدرج الرمادي إلى اللون عند التحويم تبدو جيدة وهي عبارة عن تغيير في إعداد واحد هنا.
- إطار البطاقة: الخلفية والحدود وظل الصندوق، بالإضافة إلى الزوايا الدائرية والحشوة مع Pro، لذا فهي تتناسب تمامًا مع تخطيطك.
خيارات تحوم عنصر التمرير مقابل أداة تأثيرات تحوم الصورة
تحتوي أداة الصورة الخاصة بـ Elementor على إعدادات تحوم في علامة تبويب النمط: التعتيم ومرشحات CSS والرسوم المتحركة المحومة مثل Grow أو Pulse. يغيرون الصورة نفسها. لا يمكنهم وضع نص على الصورة ، وهي الفجوة التي تملأها هذه الأداة.
| عنصر واجهة عنصر الصورة | أداة تأثيرات تحوم الصورة | |
|---|---|---|
| عتامة على التمرير | نعم | نعم |
| مرشحات CSS على التمرير | نعم | نعم |
| تحوم الرسوم المتحركة | الإعدادات المسبقة التي تحرك الصورة بأكملها | 30 تأثيرات تتحرك التراكب والعنوان والوصف |
| نص فوق الصورة | لا . التسمية التوضيحية تجلس تحت الصورة. | العنوان والوصف على الصورة |
| النص الذي يظهر في التمرير | لا | نعم |
| انقر فوق الإجراء | رابط أو مبهج | رابط أو نافذة منبثقة مع Pro |
| مبادلة إلى صورة ثانية عند التمرير | لا | لا استخدام صورة متقدمة لذلك. |
تأثيرات تحوم الصورة في لمحة
الحقائق الرئيسية حول الأداة في جدول واحد.
| ميزة | تأثيرات تحوم الصورة |
|---|---|
| تأثيرات التحويم | 30. 22 منهم بحاجة إلى المحترفين. |
| نص على الصورة | العنوان والوصف، مع علامة HTML من H1 إلى H6 للعنوان |
| انقر فوق الإجراء | لا شيء أو رابط أو نافذة منبثقة (Pro) |
| المحتوى المنبثق (Pro) | نص أو صورة أو قسم محفوظ أو قالب أو قالب صفحة |
| إعدادات الصورة | عتامة وفلاتر، مضبوطة بشكل منفصل للعادي وتحوم |
| الصورة الثانية على التمرير | لا |
| شاشات اللمس | النقرة الأولى تظهر النص. الصنبور الثاني يتبع الرابط. |
| الاحتياجات | العنصر والإضافات الرئيسية |
كيفية إضافة تأثيرات تحويم الصورة في Elementor؟
يمكنك الحصول على بطاقة تحوم عاملة في أقل من دقيقتين. لا يوجد CSS، ولا رموز مختصرة.
- قم بتثبيت الإضافات الرئيسية وتنشيطها، ثم قم بتحرير أي صفحة باستخدام Elementor.
- ابحث في لوحة الأدوات عن تأثيرات تحوم الصورة واسحبه إلى التخطيط الخاص بك.
- قم بتحميل صورتك وأضف عنوانًا ووصفًا.
- افتح القائمة المنسدلة لـ Hover Effect واختر الرسوم المتحركة. ثمانية منها مجانية و22 أخرى تأتي مع Pro.
- اضبط إجراء النقر على رابط، أو على نافذة منبثقة تحتوي على قالب محفوظ إذا كان لديك Pro.
- قم بتصميم العنوان والوصف والحاوية، ثم قم بالنشر.
شيء واحد يستحق القيام به قبل النشر: قم بمعاينة البطاقة على الهاتف. لا يوجد التمرير عند اللمس، لذا تأكد من أن سلوك النقر منطقي (المزيد حول ذلك في الأسئلة الشائعة). لكل إعداد تم وضعه بالترتيب، اتبع توثيق تأثيرات تحوم الصور.
أين يمكن استخدام تأثيرات التمرير على الصور؟
- شبكات الفريق: الاسم والدور عند التمرير، ثم السيرة الذاتية الكاملة في نافذة منبثقة عند النقر. هنا كيفية بناء قسم أعضاء الفريق.
- المحافظ والمعارض: عنوان المشروع ورابط دراسة حالة “View” فوق كل صورة.
- بطاقات الخدمة: وصف مختصر ورابط إلى صفحة الخدمة.
- يعرض المنتج: قم بإثارة صورة المنتج، ثم افتح المواصفات في نافذة منبثقة.
- مربعات المدونة والفئة: تعليق التمرير على التنقل الذي تقوده الصورة.
لمزيد من الطرق لتجميع النصوص والصور معًا، اقرأ 25 تقنية عنصر النص فوق الصورة. تتضمن عناصر واجهة المستخدم للصور ذات الصلة صورة دائري، ال معرض الصور القابلة للتصفية، ال نقطة اتصال الصورة القطعة و صورة متقدمة القطعة.
الأسئلة المتداولة لتأثيرات تحويم الصور
هل ستعمل تأثيرات التمرير هذه على الأجهزة المحمولة؟
وهي مصممة لسطح المكتب، حيث يوجد ماوس للتحليق. على شاشة اللمس، عادةً ما يتم تشغيل التأثير على النقرة الأولى لإظهار المحتوى، وتتبع النقرة الثانية الرابط أو تفتح النافذة المنبثقة. لذا خطط لنقرتين على الهاتف المحمول، وتأكد من بقاء النص قابلاً للقراءة بمجرد ظهوره.
كيف يمكنني إنشاء تأثيرات بسيطة لتحريك الصور دون كتابة CSS؟
قم بإسقاط عنصر واجهة مستخدم Image Hover Effects على صفحتك، وقم بتحميل صورة، وأضف عنوانًا ووصفًا، واختر رسمًا متحركًا من القائمة المنسدلة. هذا كل شيء، لا يوجد CSS. تكتب الأداة CSS لك خلف الكواليس، لذلك حتى بطاقة التمرير المتضمنة إلى حد ما تظل سهلة التجميع.
هل يمكنني فتح السيرة الذاتية للفريق أو تفاصيل المنتج في نافذة منبثقة عند النقر؟
نعم مع برو. ضع الاسم في العنوان والدور في الوصف، وقم بتعيين إجراء النقر على النافذة المنبثقة، واختر نوع المحتوى: القسم المحفوظ. قم ببناء السيرة الذاتية كقالب في Elementor وحددها هنا. انقر فوق الصورة وسيفتح هذا التخطيط الكامل في النافذة المنبثقة.
هل جميع تأثيرات تحويم الصور الثلاثين مجانية؟
رقم ثمانية تأثيرات مجانية: Lily، Sadie، Roxy، Bubba، Romeo، Layla، Honey وOscar. أما الـ 22 الأخرى فتأتي مع Master Addons Pro، إلى جانب المحتوى المنبثق والزوايا المستديرة وعناصر التحكم في الحشو. تعمل جميع مرشحات العنوان والوصف والرابط والصورة في الإصدار المجاني.
كيف يمكنني إظهار نص عندما يحوم شخص ما فوق صورة في Elementor؟
أضف أداة تأثيرات التمرير للصورة وقم بتحميل الصورة واكتب عنوانًا ووصفًا واختر تأثير التمرير. يبقى النص مخفيًا حتى يصبح المؤشر فوق الصورة، ثم ينحرف. لا تحتوي أداة الصورة الخاصة بـ Elementor على إعداد للنص الموجود على الصورة.
هل ستؤدي العديد من بطاقات الصور المتحركة إلى إبطاء موقعي؟
تعمل التأثيرات على CSS، لذا لا توجد مشكلة في وجود عدد قليل من الصور على الصفحة. ما يبطئ الأمور فعليًا هو وزن الصورة، لذا اضغط على صورك أولاً. بمجرد تجاوز 20 بطاقة أو نحو ذلك في صفحة واحدة، قم بتشغيل التحميل البطيء وسيظل الطلاء الأول سريعًا.
هل يمكنني استخدام تأثيرات تحويم مختلفة على صور مختلفة؟
تغطي الإعدادات بطاقة واحدة في كل مرة. لمزج التأثيرات، أضف عنصر واجهة مستخدم Image Hover Effects منفصلاً لكل صورة وقم بإعدادها بشكل مستقل. هذه هي الطريقة التي تحصل بها على معرض حيث لا يتم تحريك جميع البطاقات بنفس الطريقة.
ما فائدة "القسم المحفوظ" في النافذة المنبثقة فوق النص العادي؟
يعد القسم المحفوظ خيارًا احترافيًا، ويمنحك محرر Elementor الكامل داخل النافذة المنبثقة. بدلاً من النص العادي، يمكنك إضافة صور أو أزرار أو أعمدة أو مقاطع فيديو أو نماذج، بحيث تبدو النافذة المنبثقة مثل بقية موقعك بدلاً من مربع نص مجرد.
كيف أقوم بتكبير صورة على Hover in Elementor؟
للحصول على تكبير عادي ، حدد عنصر واجهة الصورة الخاص بـ Elementor ، وافتح علامة تبويب النمط واضبط Hover Animation على النمو. في عنصر واجهة تحريك الصور، هناك العديد من التأثيرات التي تقاس الصورة بينما يأتي العنوان والوصف.
هل يمكنني تغيير الصورة عند التمرير؟
ليس مع هذه القطعة. يحتفظ بصورة واحدة ويحرك التراكب والنص الموجود فوقها. لتحويل صورة ثانية إلى التمرير، استخدم صورة متقدمة القطعة وتشغيل عرض صورة التمرير.
عناصر واجهة المستخدم والملحقات الشائعة
إنشاء مواقع متطورة في وقت أقل.
التشكل الزجاجي
إضافات الحاويات
أنماط
![ملحق Master Addons Post/Page Duplicator لـ Elementor: رابط صف MA Duplicator في قائمة صفحات WordPress لإنشاء صفحة مقصودة - مسودة [مكررة #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
ناسخ البريد/الصفحة
