fbpx
الرئيسية / تطوير المواقع / بلوجر / كيفية تكبير الصور عند تمرير الماوس باستخدام CSS

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

ضع تقييمك من فضللك
[Total: 0 Average: 0]
اليوم سنقدم اليكم اضافة جميلة عن طريق 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  برابط الصورة 

الصور عند تمرير الماوس باستخدام CSS” width=”400″ />

عن المهندس الاول

اضف رد

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.

x

‎قد يُعجبك أيضاً

تحميل 5 قوالب بلوجر عربية إحترافية مجانا من متجر Picalica

ضع تقييمك من فضللك [Total: 2 Average: 4]تحميل 5 قوالب بلوجر عربية ...

المهندس الاول للتدريب تعليم كل مايخص الحاسوب من البداية للإحتراف حماية - صيانة - تصميم - انترنت - برامج كامله -دورات ......