اضافه تحرك الصوره عند وضع الماوس عليها Blogger

اضافه  تحرك  الصوره   عند وضع الماوس  عليها   Blogger

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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(+4deg);

-moz-transform: rotate(+4deg);

}

.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(-2deg);

-moz-transform: rotate(-2deg);

}

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

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