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

الصور تحيي المحتوى في كل موقع وأيضا تعمل على إهتمام الزائر، وأهمية الصور كبرى ، ألاحظ أن المدونات العربية 

المتخصصة في إضافات بلوجر وغيرها .. لا تقدم إضافات لها تأثير كبير وتعطي جمالية أكثر ألاحظ إضافات عادية ومتكررة .. 

هذا ليس موضوعنا على أي حال فنحن نقدم لكم الأفضل والحصري وتقتصر إضافتنا اليوم على تأثير الصور سوى بالمواضيع أو 

غيرها تسمى تأثيرات Hover  سأقدم لكم إثنين تأثييرين سهلين الإستعمال .. تأثيرات الهوفر تطبق أغلبية على صور التدوينات كما

 بمدونة عرب ويب عند مرور الماوس على الصورة تظهر خلفية شفافة ولكي أعطيكم مثال على التأثيرين أترككم للمعاينة

الشكل الأول الشكل الثاني

شرح طريقة التركيب

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>

5. ضع الكود التالي قبله [ فوقه]

          * إختر الشكل المناسب لك

الشكل الأول | تأثير تغيير اللون لرمادي |

.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#

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