كيفية تكبير الصور عند تمرير الماوس باستخدام

الماوس , الصور , تمرير , باستخدام , تكبير , عند , كيفية

كيفية تكبير الصور عند تمرير الماوس باستخدام

. اليوم سنقدم اليكم اضافة جميلة عن طريق 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 برابط الصورة .

المصدر: منتديات تراتيل شاعر - من قسم: تطوير المواقع والمنتديات ▪●

---

;dtdm j;fdv hgw,v uk] jlvdv hglh,s fhsjo]hl hgw,v jlvdv fhsjo]hl j;fdv uk]