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

 

 السلام عليكم!اقدم لكم اليوم كيفية اضافة تسمية توضيحيه بشكل جميل على الصورة

تم برمجة الاضافة من صاحب مدونة بلوجر تيراكس  فشكرا له بالنسبه لكيفية 

استخدام هذه الاضافة فيمكنك استخدامها في الصفحة الرائيسيه لمدونتك 

كاعلان لموضوع ما ويمكنك اضافته في التدوينيات ايضا و استخدامه

 لاشياء متعدده مثال .

الان لكيفية التركيب:

1. اذهب للوحة تحكم مدونتك.
2. القالب.
3. تحرير HTML>متابعه.
4. توسيع القوالب.
5. اضغط Ctrl+F من لوحة المفاتيح.
6. وابحث عن الوسم التالي:

]]></b:skin>

والصق الكود التالي قبله مباشرة:

/* Bloggertrix  */
.label { 
 /*Position*/
 overflow: hidden;
 position: relative;
 margin: 20px;
 display: inline-block;
 vertical-align: top;
 
 /*Skin*/
 border: 7px solid #fff;
 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
.label img {
 display: block;
}
.label p {
 /*Position*/
 position: absolute;
 padding: 10px;
 width: 100%;
 
 /*Skin*/
 background: #000; /*fallback*/
 background: rgba(0,0,0,0.7);
 color: #fff;
 font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
 
 /*Animation*/
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
/*Top In Bounds*/
.top:hover p, .topleft p, .topright p {
 top: 0%;
}
/*Top Out of Bounds*/
.top p, .centertop p {
 top: -50%;
}

/*Bottom In Bounds*/
.bottom:hover p, .bottomleft p, .bottomright p {
 bottom: 0%;
}
/*Bottom Out of Bounds*/
.bottom p, .centerbottom p {
 bottom: -50%;
}
/*Left In Bounds*/
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {
 left: 0%;
}

/*Left Out of Bounds*/
.bottomleft p, .topleft p, .centerleft p, .centerleft p {
 left: -150%;
}

/*Right Out of Bounds 150%*/
.bottomright p, .topright p, .centerright p {
 left: 150%;
}

/*Centered From Bottom*/
.centerbottom:hover p {
 bottom: 50%;
}

/*Centered From Top*/
.centertop:hover p, .centerleft p, .centerright p {
 top: 50%;
}

/*Center Margin Fixes*/
.centertop:hover p, .centerleft p, .centerright p {
 margin-top: -20px;
}

.centerbottom:hover p {
 margin-bottom: -20px;
}

الان اضغط حفظ و انتقل إلى تخطيط  واضف اداة 'HTML/Javascript"

و الصق الكود التالي داخلها

<div class="label top">
   <p>الكتابه التي تريدها ان تظهر في الصوره</p>
   <img src="رابط الصوره" />
 </div>
 

عدل الكتابة الزرقاء بما تريده ان يظهر في الصوره عند تحرريك مؤشر الفأرة لها

عدل الكتابه الزرقاء برابط الصوره

عدل الكتابه الصفراء با:

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

label top

اذا اردت ان تظهر الكتابة في اسفل الصوره اضف بدل الموجودفي الكود بالتالي :

label bottom

اذا اردت ان تظهر الكتابة من اسفل اليمين في الصوره اضف بدل الموجود في الكود بالتالي :

label bottomright

اذا اردت ان تظهر الكتابة من اسفل اليسار في الصوره اضف بدل الموجود في الكود بالتالي :

label bottomleft

اذا اردت ان تظهر الكتابة من اعلى اليسار في الصوره اضف بدل الموجود في الكود بالتالي :

label topleft

ملاحظة: اذا اردت اضافة صور متعدده كرر الكود مع تعديل ما يلزم تعديله.

_____________________________________________________________

ارجو منك في حال اعجبتك الاضافة النقر على ازرار المواقع الاجتماعية ادناه و لا تنسى

مشاركتي برئيك في تعليق ولو بكلمة شكر .

تحياتي.