اليوم سنقدم اليكم اضافة جميلة عن طريق CSS3 ، هده الاضافة عبارة عن اداة تكبير الصور او ما يعرف بزوم ZOOM لصور على مدونات البلوجر و سي اس اس 3 .
يمكن لأي صورة تكبيرها عند تحريك الماوس من فوقها مع الحفاظ على الحجم المكان المخصص لها و عند نزع الفأرة من فوق الصورة ترجع الى ما كانت عليه اي الى الحجم الأصلي .
يمكنك ايضا استخدام نفس الطريقة باستعمال JQUERY و CSS . لكن يمكن القول ان ل CSS سرعة في التصفح اضافة الى انها غير معقدة و سهلة الاستعمال .
معاينة الاضافة "ضع الماوس فوق الصورة"
شرح طريقة الاضافة على البلوجر
- ادهب الى مدونة البلوجر ثم قالب ثم تحريرHTML
- ابحث عن الكود الثالي ]]></b:skin>
- ضع الكود الثالي من فوقه
.zoom-image 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;
max-width:100%;
}
.zoom-image:hover img {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
.zoom-image {
max-width:100%;
width:400px;
overflow:auto;
}
- ثم اضغط على حفظ .
- عند تحرير مشاركة اضف الكود الثالي
<div class="zoom-image"><img src="image-url"/> </div>
او
<a class="zoom-image" href="image-url"><img src="image-url"/></a>
- مع تغييرimage-url برابط الصورة .
عدد المشاهدات:
ليست هناك تعليقات:
إرسال تعليق