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

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

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

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

Bookmark and Share

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

محمد عبدالله:عربي الهوية مصري الجنسية /اعمل في مجال الانترنت و الكمبيوتر لهدف واحد ووحيد وهو مساعدة كل عربي مبتدئ وتأهيله للإعتماد علي نفسه بعد الله عز وجل وأرجو منكم مساعدتي في تحقيق الهدف بأن تكونو في عون بعضكم البعض كعرب دون النظر للجنسية أو الدين أو العرق .
المهندس الاول للتدريب تعليم كل مايخص الحاسوب من البداية للإحتراف حماية - صيانة - تصميم - انترنت - برامج كامله -دورات ......