أخر المقالات
إشترك معنا ليصلك جديد الموقع

بــريدك الإلكترونى فى أمان معنا

الزيارات:
تأثير تكبير الصورة داخل إطار بمرور الماوس عليها image zoom css

بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
 موضوعنا اليوم هو طريقة تكبير الصورة في المشاركات عند تمرير الموس عليها مما يزيد في حجم الصورة وتصبح أكثر وضوحا وعند إبعاد مؤشر الماوس تعود الصورة لوضعها الطبيعى مع تأثير باهت إلى حد ما للصورة هاته الاضافة تضفي على موقعك احترافية وجمالية.
تستخدم هذه الخاصية لعمل معارض الصور photo gallery لعرض الصور بطريقة جميلة
هذا الكود يستخدم فى كل موضوع على حدة

طريقة التركيب بمدونات بلوجر:
 يتم وضع هدا الكود داخل الموضوع بمعنى أثناء تحرير الموضوع
1 إنتقل إلى جهة تحرير HTML
2 ضع رابط الصور بداخل هذا الكود
الكود:
/* تكبير الصورة ----------------------------------------------- */  
<div class="hovergallery"> <img src="رابط الصورة 1"> 
<img src="رابط الصورة 2"> <img src="رابط الصورة 3"> 
<img src="رابط الصورة 4"> <img src="رابط الصورة 5"> 
<img src="رابط الصورة 6"> </div> <style type="text/css">
 /*Credits: Dynamic Drive CSS Library */
 .hovergallery img{ 
-webkit-transform:scale(0.8);
 /*Webkit: Scale down image to 0.8x original size*/ 
-moz-transform:scale(0.8); /*Mozilla scale version*/ 
-o-transform:scale(0.8); /*Opera scale version*/ 
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ 
-moz-transition-duration: 0.5s; /*Mozilla duration version*/ 
-o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7;
 /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ 
} 
.hovergallery img:hover{ 
-webkit-transform:scale(1.1); 
/*Webkit: Scale up image to 1.2x original size*/ 
-moz-transform:scale(1.1); 
/*Mozilla scale version*/ -o-transform:scale(1.1); 
/*Opera scale version*/ box-shadow:0px 0px 30px gray; 
/*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; 
/*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; 
/*Mozilla shadow version*/ opacity: 1; 
} 
</style>
<a href="http://www.3adnani.com"> Get it here </a>
/* تكبير الصورة ----------------------------------------------- */ 


0 التعليقات :

إرسال تعليق