كود css تحريك الصورة عند مرور الماوس عليها ووضع تأثيرات رائعة عليها

الكود لجميع النسخ

يعمل على(صور البيانات الشخصيه-الصور فى المساهمات-ازرار المساهمات)


ظل خلف جميع الصور

تأطيرات احترافيه على جميع الصور

ميلان الصور وتحركها بمجرد مرور الماوس عليها

الكود:

/*----- اضافة التأثيرات على الصور-خلدون -----*/

    .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) تمثل درجة الميلان عند مرور الماوس كلما زدت فى الرقم زاد الميلان
بمرور المؤشر والعكس صحيح
-من يرغب الغاء هذا الميلان وجعل الايطارات فقط يمكنه وضع القيمة 0
التحكم فى حجم الايطارات عن طريق الآتى
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
كلما قمت بزيادة القيمه زاد حجم الايطار مع الظل والعكس صحيح


طريقة الوضع كالعاده
لوحة الاداره-مظهرالمنتدى-الوان-ورقة تصميمCss-ضع الكود-قدم

جزاك الله خيرا اخي ابو سلمان

دائما مبدع

وراقي

شكرا لك

والله يعطيك مليون عافية خيي

مششكور ويعطيك الف عافيه يارب