اضافة تأثيرات حركية على الصور في مدونات بلوجر

Tweet

اضافة تأثيرات حركية على الصور في مدونات بلوجر 

خاصية تعطي للصور جمالية وتنسيق رائع عند وضع مؤشر الماوس علي الصورة سوف تميل جانبا وعند إبعاد مؤشر الماوس تعود الصورة لوضعيتها الطبيعية ، وايظاً صور الخلاصات "إقرأ المزيد" هي كذلك تطبق عليها هذه الخاصية مما يعطي للمدونة جمالية ورونق رائعين ،،،

والآن دعونا لنتوجه لتطبيق الكود : 

- انتقل الى لوحة تحكم مدونتك ثم اختر علامة ( تصميم ) ثم ( تحرير HTML )ثم ضع علامة ( صح ) في خانة " توسيع قوالب عناصر واجهة المستخدم " . بعدها قم بالبحث عن الكود التالي وذلك بالاستعانة بلوحة التحكم ( Ctrl + F ) :

]]></b:skin>

ثم قم بوضع الكود التالي قبلة : -

.post img {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك  سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس  وتمثل كذلك القيمة  1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .


والتتيجة تكون الصورة على هذا الشكل .