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

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

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

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

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

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

3.ضع الكود التالي قبله [ فوقه]    
 * إختر الشكل المناسب لك

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

.post-body img {
    filter: url("data:image/svg+xml;utf8,#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;
}

  * بعد اختيارك للشكل يمكنك حفظ القالب .

شارك المقال

شاركه على فيسبوك شاركه على جوجل+