19 سبتمبر 2014

مدون محترف اضافات بلوجر دروس بلوجر CSS اضافة تأثير الزوم على الصور لمدونات بلوجر

اضافة تأثير الزوم على الصور لمدونات بلوجر

اضافة تأثير الزوم إلى الصور لمدونات بلوجر عند مرور مؤشر الماوس على الصورة


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




طريقة التركيب


الان ابحث عن ]]></b:skin> و اضف الكود التالي فوقه

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

كيفية وضع الصور في الموضوع


عند كتابة موضوع جديد انتقل إلى وضع HTML
و قم بلصق هذا الكود في وضع HTML


 <a class="zoomeffect" href="#" target="_blank">
<img src="##" /></a>

مع استبدال ## برابط الصورة و يمكن تكرار الكود اكثر من مرة على حسب رغبتك
و لوضع رابط داخل الصورة استبدل # برابط الموضوع التي تريده


يمكنك ايضا مشاهدة : اضافة تأثير الدوران على الصور لمدونات بلوجر 

تحياتي 
مدون محترف

مواضيع ذات صلة
اضافة تأثير الزوم على الصور لمدونات بلوجر
4 / 5
بواسطة

هناك 12 تعليقًا :

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r