السلام عليكم مرحبا بكم في هذا الدرس الذي سنشرح فيه طريقة اضافة تاثير تكبيير أو 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>
أتمنى ان يكون الشرح في المتناول ، لا تنسوا ان تضعوا ارائكم تعليقاتكم و استفساراتكم شكرا لكم حكمات للمعلوميات .
