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

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

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

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

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

• توجه الى المدونة ، اختر قالب ثم تحرير 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. اضافة تأثير تصغير الصور 

• توجه الى المدونة ، اختر قالب ثم تحرير 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>

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

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