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