رحيل المشاعر
04-19-2016, 05:09 AM
.http://3.bp.blogspot.com/-ef-TclyJDbY/VPcgKiWK4VI/AAAAAAAAEcA/CZhE4K3leAA/s1600/Hukmaty.png
اليوم سنقدم اليكم اضافة جميلة عن طريق CSS3 ، هده الاضافة عبارة عن اداة تكبير الصور او ما يعرف بزوم ZOOM لصور على مدونات البلوجر و سي اس اس 3 .
يمكن لأي صورة تكبيرها عند تحريك الماوس من فوقها مع الحفاظ على الحجم المكان المخصص لها و عند نزع الفأرة من فوق الصورة ترجع الى ما كانت عليه اي الى الحجم الأصلي .
يمكنك ايضا استخدام نفس الطريقة باستعمال JQUERY و CSS . لكن يمكن القول ان ل CSS سرعة في التصفح اضافة الى انها غير معقدة و سهلة الاستعمال .
معاينة الاضافة "ضع الماوس فوق الصورة"
http://4.bp.blogspot.com/-qSU_ep8S90o/VPcirPHG-kI/AAAAAAAAEcM/GN2smOUdWeU/s1600/tete-Blogger.jpg
شرح طريقة الاضافة على البلوجر
ادهب الى مدونة البلوجر ثم قالب ثم تحرير 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 برابط الصورة .
اليوم سنقدم اليكم اضافة جميلة عن طريق CSS3 ، هده الاضافة عبارة عن اداة تكبير الصور او ما يعرف بزوم ZOOM لصور على مدونات البلوجر و سي اس اس 3 .
يمكن لأي صورة تكبيرها عند تحريك الماوس من فوقها مع الحفاظ على الحجم المكان المخصص لها و عند نزع الفأرة من فوق الصورة ترجع الى ما كانت عليه اي الى الحجم الأصلي .
يمكنك ايضا استخدام نفس الطريقة باستعمال JQUERY و CSS . لكن يمكن القول ان ل CSS سرعة في التصفح اضافة الى انها غير معقدة و سهلة الاستعمال .
معاينة الاضافة "ضع الماوس فوق الصورة"
http://4.bp.blogspot.com/-qSU_ep8S90o/VPcirPHG-kI/AAAAAAAAEcM/GN2smOUdWeU/s1600/tete-Blogger.jpg
شرح طريقة الاضافة على البلوجر
ادهب الى مدونة البلوجر ثم قالب ثم تحرير 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 برابط الصورة .