تأثيرات تحويم صورة CSS في Elementor (5 مقتطفات نسخ ولصق)

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

• تتخذ تأثيرات تحويم صورة CSS في Elementor خطوتين: إضافة اسم فئة إلى عنصر واجهة مستخدم الصورة ضمن فئات CSS المتقدمة، ثم لصق قاعدة CSS التي تستهدف تلك الفئة.
• تأثيرات تحويم صورة CSS الخمسة في هذا الدليل هي التكبير داخل الإطار، والتدرج الرمادي إلى اللون، والرفع مع الظل، والتراكب الداكن والتعليق الذي ينزلق لأعلى.
• يحتوي Elementor Pro على مربع CSS مخصص في علامة التبويب "متقدم" لكل عنصر واجهة مستخدم، وبدون Pro، يمكن أن ينتقل نفس CSS إلى المظهر والتخصيص وCSS الإضافي.
• تقوم أداة صورة Elementor بطباعة التسمية التوضيحية الخاصة بها كتسمية توضيحية داخل الشكل، وهو ما يجعل التسمية التوضيحية المنزلقة ممكنة باستخدام CSS وحده.
• لا تحتاج تغييرات التدرج الرمادي إلى اللون والعتامة إلى CSS في Elementor، لأن علامة التبويب Style الخاصة بعنصر واجهة المستخدم الخاص بالصورة تحتوي بالفعل على مرشحات CSS وOpacity في علامة تبويب Hover.

تعمل تأثيرات تحويم الصور CSS في Elementor بنفس الطريقة التي تعمل بها في أي مكان: فئة على العنصر وقاعدة بها :hover. الأجزاء الوحيدة الخاصة بالعنصر هي المكان الذي تكتب فيه الفصل والمكان الذي تلصق فيه CSS. فيما يلي خمسة تأثيرات يمكنك نسخها، تم اختبار كل منها على Elementor 4.3 باستخدام أداة الصورة القياسية.

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

كيف تعمل تأثيرات تحويم CSS في Elementor

كل مقتطف أدناه يتبع نفس النمط. أنت تعطي عنصر واجهة المستخدم للصورة فئة، ويقوم CSS بتغيير الصورة داخل عنصر واجهة المستخدم هذا عندما يكون المؤشر فوقها.

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

يهبط الفصل على العنصر الخارجي لعنصر واجهة المستخدم وتكون الصورة img بداخله، لذا تستهدف القواعد .hover-zoom img.

أين يمكن إضافة CSS

لديك أربعة أماكن للصق CSS، اعتمادًا على ما تم تثبيته.

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

5 تأثيرات تحويم صورة CSS للنسخ

يحتوي كل تأثير على اسم فئة وCSS ولقطة شاشة للنتيجة قبل وأثناء التمرير.

1. تكبير داخل الإطار

يتم تكبير الصورة بينما يظل صندوقها بنفس الحجم. اسم الفئة: hover-zoom.

.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); }

2. تدرج الرمادي إلى اللون

الصورة بالأبيض والأسود وتتحول إلى اللون الكامل عند التمرير. اسم الفئة: hover-color.

.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }

3. ارفع بالظل

تتحرك الصورة للأعلى ببضع بكسلات وتكتسب ظلًا ناعمًا، مثل البطاقة التي يتم التقاطها. اسم الفئة: hover-lift.

.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }

4. تراكب داكن

تتلاشى طبقة داكنة فوق الصورة. إنه مبني بعنصر زائف، لذلك لا حاجة إلى علامات إضافية. اسم الفئة: hover-dim.

.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }

5. التسمية التوضيحية التي تنزلق للأعلى

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

.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }

هذا يعتمد على وجود التسمية التوضيحية هناك. بدون تسمية توضيحية، لا يقوم Elementor بطباعة الشكل والتسمية التوضيحية، ولا تحتوي القاعدة على أي شيء للتحرك.

CSS أو إعدادات التمرير المضمنة؟

تحقق من عناصر التحكم الخاصة بـ Elementor قبل كتابة CSS، لأن اثنين من هذه التأثيرات الخمسة موجودان كإعدادات. تحتوي علامة التبويب "نمط" الخاصة بعنصر واجهة المستخدم في الصورة على علامة تبويب "تحريك" مع "Opacity" و"CSS Filters" و"Hover Animation".

تتم تغطية الإعدادات المضمنة خطوة بخطوة كيفية إضافة تأثيرات تحويم الصورة في Elementor. تم توثيق التقنية العامة على صفحة MDN للفئة الزائفة :hover.

الطريق بدون رمز

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

تستبدل أداة Image Hover Effects في Master Addons ذلك بمنسدلة. يحتوي على 30 تأثيرًا وعنوانًا ووصفًا لكل صورة وعناصر تحكم في علامة التبويب "النمط" للألوان والنوع.

شاهدهم على الهواء مباشرة. ال صفحة القطعة تأثيرات تحوم الصورة يحتوي على ثماني بطاقات للتحليق وجدول بجميع التأثيرات الثلاثين.

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

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

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

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

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

• أزرار متحركة للعنصر
• تأثيرات التمرير العنصر
• كيفية إضافة الرسوم المتحركة GSAP في Elementor
• كيفية تكبير أو تغيير الصورة عند التمرير في Elementor
• 30 تأثير تحويم الصورة لـ Elementor