الاثنين، 8 ديسمبر 2014

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

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

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


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





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


الان ابحث عن ]]></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>

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


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

تحياتي 

0 التعليقات:

إرسال تعليق