تأتير هوفر إحترافي لصور المواضيع بتقنية css

السلام عليكم من جديد :

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

وبإذن الله في هذه التدوينة سأقدم لكم تأتيري هوفر (2) هما الأكتر إستعمالا على المواقع ..

طريقة التركيب؟

تتوجه للقالب تم تحرير .

تبحت عن  ]]></b:skin>

وأضف التأتير فوقه : 

التأتير الأول : 

تأتير تغيير اللون إلى رمادي :

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

التأتير التاني :

تأتير الإهتزاز

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

يكفيك حفظ القالب وسيطبق التأتير على صور التدوينات ويمكنك تطبيقه على أي عنصر آخر في الموقع عبر تغيير أسماء العناصر .