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

The Ghost

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