شرح طريقة اضافة تأثير التكبير ZOOM الى صور في البلوجر

شرح طريقة اضافة تأثير ZOOM الى صور في البلوجر


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

شرح طريقة اضافة تأثير ZOOM الى صور في البلوجر

1. اضافة تأثير تكبير الصور 


شرح طريقة اضافة تأثير ZOOM الى صور في البلوجر

  • توجه الى المدونة ، اختر قالب ثم تحرير HTML 
  • ابحث عن الكود الثالي

</head>
  •  ضع الكود الثالي من فوق الكود السابق
<style>
.img {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.img:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
</style>



2. اضافة تأثير تصغير الصور 


شرح طريقة اضافة تأثير ZOOM الى صور في البلوجر


  • توجه الى المدونة ، اختر قالب ثم تحرير HTML 
  • ابحث عن الكود الثالي

</head>

  •  ضع الكود الثالي من فوق الكود السابق
<style>
.img {
display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.img:hover{
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
</style>



أتمنى ان يكون الشرح في المتناول ، لا تنسوا ان تضعوا ارائكم تعليقاتكم و استفساراتكم شكرا لكم حكمات للمعلوميات .

مقالات ذات صلة

Previous
Next Post »

6 التعليقات

التعليقات
9/23/2014 delete

السلام عليكم اخي شكرا على الموضوع ممكن طلب اريد قالب مدونتك النسخة الجديد يعني بعدما عدلت عليه وشكرا

Reply
avatar
10/04/2014 delete

للاسف الطريقة لم تعمل

Reply
avatar
10/22/2014 delete

الطريقة مش صحيحة
http://softic-net.blogspot.com/

Reply
avatar
غير معرف
7/21/2015 delete

للاسف الطريقة لم تعمل

Reply
avatar
غير معرف
7/21/2015 delete

للاسف الطريقة لم تعمل

Reply
avatar
6/12/2016 delete

أخي شكرا على الموضوع هل يمكنك ان تضع شرح للهيدر الدي يظهر فيه العنوان

Reply
avatar

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