شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي

كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

زائر
زائر
تمت المشاركة في السبت سبتمبر 05, 2015 1:39 am
تذكير بمساهمة فاتح الموضوع :

كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

السلام عليكم ورحمة الله الكود سهل التعديل

عبارة عن التحكم بحجم الصور الكبيرة وعدم تجاوزها حد معين او مقياس معين دون التاثير بحجم الصور الصغيرة

بالاضافة لعمل حركة زووم أي تكبير للصورة او تصغير للصورة

اول حركة التكبير

صورة الكود

http://i61.tinypic.com/23t32j5.gif


الكود

الكود:
.postbody img {
    max-width: 500px;
    /* Resize the image for IE6 */
    width: expression(this.width > 500 ? 500: true);
}  

/*GROW*/
.postbody img {
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.postbody img:hover {
   max-width: 600px;
    /* Resize the image for IE6 */
    width: expression(this.width > 600 ? 600: true);
}  

ثاني حركة التصغير

صورة الكود


http://i57.tinypic.com/978a6p.gif



الكود

الكود:
.postbody img {
    max-width: 600px;
    /* Resize the image for IE6 */
    width: expression(this.width > 600 ? 600: true);
}  

/*GROW*/
.postbody img {
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.postbody img:hover {
   max-width: 500px;
    /* Resize the image for IE6 */
    width: expression(this.width > 500 ? 500: true);
}  



تغيير رقمي 600 و 500
حسب ماترونه مناسب

حفظ الحقوق عند النقل وذكر المصدر

دمتم بخير

رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

بصمة خالدة
عدد المساهمات : 23057

معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
تمت المشاركة في السبت فبراير 06, 2016 12:34 pm
بارك الله فيك  وجعله الله لك في ميزان
حسناتك دمت في  حمي الرحمن

رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

avatar
بصمة خالدة
الجنس : ذكر

الدلو

عدد المساهمات : 37103

نقاط النشاط : 41651

السٌّمعَة : 282

بلد العضو :

العمر : 18

معاينة صفحة البيانات الشخصي للعضوhttp://WwW.t-AlTwEr.CoM
تمت المشاركة في الأحد فبراير 07, 2016 5:53 pm
كوددد جميل
شكككرآ ~
التوقــيـــــــــــــــــــــع

رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

avatar
بصمة خالدة
الجنس : ذكر

الجدي

عدد المساهمات : 5986

نقاط النشاط : 6799

السٌّمعَة : 60

بلد العضو :

العمر : 100



معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
تمت المشاركة في الأحد فبراير 07, 2016 6:08 pm
كوددد جميل
شكككرآ   ~
التوقــيـــــــــــــــــــــع


سبحان الله وبحمده ..
          سبحان الله العظيم ...

اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين



رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

avatar
عضو فعال
الجنس : ذكر

عدد المساهمات : 668

نقاط النشاط : 988

السٌّمعَة : 24

بلد العضو :

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الأحد فبراير 07, 2016 6:54 pm
كود وتطوير رائعه
يعطيك العافيه وتسلم الأيادي المتألقه
على روعة ماخطت لنا من ابجديات واكواد ماسيه
بإنتظار روائعك القادمه بشوووق
التوقــيـــــــــــــــــــــع



رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

زائر
زائر
تمت المشاركة في الثلاثاء مايو 17, 2016 7:29 pm
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي

رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

avatar
بصمة خالدة
الجنس : ذكر

السمك

عدد المساهمات : 11054

نقاط النشاط : 11867

السٌّمعَة : 70

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الثلاثاء يوليو 12, 2016 11:55 pm
شكر جزيلا للطرح القيم
ننتظر المزيد من ابداع مواضيعك الرائعة
تحياتي وتقديري لك
@CLARO@
التوقــيـــــــــــــــــــــع

رد: كود css التحكم بحجم الصور الكبيرة ,اضافة تاثير تكبير وتصغير على الصورة

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 5:56 pm

كود جميل شكرا لك

استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى