إضافة تأثير Hover لصور المواضيع

إضافة تأثير Hover لصور المواضيع

يوجد الآن مشاهدة التعليقات : 18

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin> ثم ضع الكود التالي فوقه

الشكل الأول


.post-body img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
 /* Firefox 3.5+ */
    filter: gray;
 /* IE6-9 */
    -webkit-filter: grayscale(100%);
 /* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

الشكل الثاني


.post-body img {
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.post-body img:hover {
    margin-top: 2px;
}
* بمجرد إختيار الشكل ووضعه في القالب يمكنك حفظ العمل وسيطبق التأثير على صور التدوينات يمكنك أيضا تطبيق التأثير على عنصر أخر مثل السيدبار بتغير : post-body img. إلى #sidebar img

لمن واجهته مشكلة أو لا يعلم شيئا فباب التعليقات مفتوح للجميع نلتقي مع إضافة أخرى
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 18 تعليقًا:

  1. شكرا لك اخي

    ردحذف
  2. شكرا لك أخي والله نستفيد منك كثيرا واصل

    ردحذف
    الردود
    1. شكرا لك أيضا على التشجيع

      حذف
  3. لم أجِد هذا الكود للأسف : ]]>
    قوالب مدوناتي الثلاثة كلها لا تحوي هذا الكود :(
    هل هنالك طريقةٌ اُخرى يا ترى ؟

    ردحذف
    الردود
    1. ضروري أن يكون موجود إذا كنت تستعمل قالب بلوجر ابحث فقط عن skin وسيظهر لك بجانب الأرقام ستجد سهم إضغط عليه بعدها ابحث مجددا وستجده

      حذف
    2. ممم، أظن أن القالب غير داعم لهذه الخاصية، على أيةِ حال
      شكراً على الإضافة الجميلة، إن شاء الله تضع لنا دروساً أكثر
      مع إضافات تغيير خاصيات البحث بشكل أكثر تطور .. إلخ،
      أحب دروسكَ و أحبكَ، شكراً لكَ <3

      حذف
  4. Yahia Absi2/14/2015

    اخي انا عملت تعليقات disqus لكن التعليقات القديمة اختفت رغم انني استوردتها في disqus

    ردحذف
  5. ممكن لو شمحت كود شاهد ايضا مثل اللى عندك دا لو مفيش مانع حضرتك

    ردحذف
  6. ممكن لو سمحت كود شاهد ايضا مثل اللى عندك ارجوك رد

    ردحذف
  7. هل يمكن وضع الشكلين معا

    ردحذف
    الردود
    1. لا يمكن أن تستعمل كِلا الشكلين إلا في حالة منطقة معينة لكل شكل

      حذف
  8. غير معرف1/10/2016

    شكرا إضافة رائعة لنلأمل الإضافات الأخرى ان لا يكون بها مشاكلههههههه لانو هناك بعض المواقع تعطينا اكواد يكون فيها خلل ما

    ردحذف
    الردود
    1. العفو اختي، في الواقع قد تكون الإضافات تشتغل 100% لكن لا تتوافق مع القالب... لأسباب ترجع في التركيب أو نقص شيء فقط
      أتمنى أن تشتغل معك اضافاتنا

      حذف
  9. اصتطيع ان افعل كلا التاثيرين في نفس الوقت

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم