طريقة عمل تاثير متحرك على الصور داخل االتدوينه بتقنية ال css3

لتطبيق تلك الاضافه على مدونتك قم باتباع الخطوات التي بالاسفل :

1. قم بالذهاب الى لوحة تحكم مدونتك > ثم الى تصميم> ثم تحرير HTML
2. قم باخذ نسخه احتياطيه من قالب مدونتك
3. ابحث عن الكود التالي ]]></b:skin>
4. ضع قبله الكود الموجود بالاسفل

/* --------- tqarob Image Rotation ----- */
.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1.3;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

طريقة استخدام تلك الطريقه على الصور داخل التدوينه?

<img src="رابط الصوره" border="0" alt="وصف مختصر للصوره"  class="opacity" />