تزيد الصور من تفاعل المستخدم على مواقع الويب. هذا هو السبب في أنك بحاجة إلى تحسين الصور ، ومعرفة كيفية إضافة معارض صور جميلة ، وإصلاح أي مشكلات تتعلق بالصور على موقعك. هناك العديد من الطرق لجعل صورك بارزة. أحدها يستخدم تأثير التلاشي على الصور. في هذه المقالة ، سنوضح لك كيفية تلاشي الصور عند تمرير الماوس فوق ووردبريس.
في الأساس عندما يجلب المستخدم الماوس فوق صورة على موقعك ، فسوف يتلاشى قليلاً. انظر مثال لقطة الشاشة أدناه:
تأثير تتلاشى الصورة
أولاً سنوضح لك كيفية إضافة تأثير التلاشي البسيط على الصور في منشورات ووردبريس الخاصة بك. سنكون باستخدام CSS لذلك. كل ما عليك فعله هو نسخ الشفرة التالية ولصقها في المظهر أو ملف المظهر style.css الفرعي.
.post img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}سيؤثر مقتطف CSS هذا على جميع الصور المعروضة في منشورات ووردبريس. ومع ذلك ، هناك خلل بسيط في هذا المقتطف. عندما يمرر المستخدم الماوس فوق صورة ما ، فإنه يقوم على الفور بتبديل التعتيم. هذا شعور خشن بعض الشيء ، أليس كذلك؟ لنجعل الأمر أكثر سلاسة عن طريق إضافة قواعد انتقال CSS.
.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}يمكنك أيضًا عكس هذا التأثير عن طريق تعيين عتامة افتراضية أقل لصورك ، ثم التخفيف إلى عتامة كاملة مما ينتج عنه تأثير متوهج. كل ما عليك القيام به هو استخدام CSS التالية في ورقة الأنماط الخاصة بك:
.post img {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}قد لا يرغب بعض مستخدمينا في إضافة هذا التأثير إلى جميع الصور في منشوراتهم. ماذا عن الصور المميزة فقط أو نشر الصور المصغرة ؟ لإضافة هذا التأثير إلى الصور المصغرة لمشاركتك فقط ، يمكنك استخدام .wp-post-imageالفئة الافتراضية التي تم إنشاؤها بواسطة ووردبريس للصور المميزة. ببساطة استبدل .post img:hoverبـ img.wp-post-image:hover.
يمكنك تعديل قيمة التعتيم أو وقت تأخير الانتقال للحصول على التأثير الذي تريده. نأمل أن تساعدك هذه المقالة في تعلم كيفية تلاشي الصور عند تمرير الماوس فوق ووردبريس. أخبرنا برأيك من خلال ترك تعليقاتك وأسئلتك في التعليقات أدناه. لا تنسى متابعتنا على تويتر
نأمل أن تساعدك هذه المقالة في تعلم كيفية تغيير نظام ألوان الادمن في الووردبريس. قد ترغب أيضًا في رؤية مختارات حول الإضافات (بلجن) في الووردبريس ودليلنا حول كيفية اختيار أفضل شركات حجز النطاقات والاستضافات وكيفية التعامل معها.
إذا أعجبك هذا المقال ، فيرجى الاشتراك في قناتنا على اليوتيوب لدروس فيديو في الووردبريس. ويمكنك أيضًا أن تجدنا على فيسبوك وتويتير وانستجرام وتيكتوك، لطفاً لا تنسى متابعتنا، فنحن نسعد برؤيتك..
