اضافة تأثير كتابه تظهر على الصوره عند تحريك المؤشر عليها
https://www.techpointblog.com/2012/10/add-animated-css-image-labels-for.html
السلام عليكم!اقدم لكم اليوم كيفية اضافة تسمية توضيحيه بشكل جميل على الصورة
تم برمجة الاضافة من صاحب مدونة بلوجر تيراكس فشكرا له بالنسبه لكيفية
استخدام هذه الاضافة فيمكنك استخدامها في الصفحة الرائيسيه لمدونتك
كاعلان لموضوع ما ويمكنك اضافته في التدوينيات ايضا و استخدامه
- اذهب للوحة تحكم مدونتك.
- القالب.
- تحرير HTML>متابعه.
- توسيع القوالب.
- اضغط Ctrl+F من لوحة المفاتيح.
- وابحث عن الوسم التالي:
]]></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
ملاحظة: اذا اردت اضافة صور متعدده كرر الكود مع تعديل ما يلزم تعديله.
_____________________________________________________________
ارجو منك في حال اعجبتك الاضافة النقر على ازرار المواقع الاجتماعية ادناه و لا تنسى
مشاركتي برئيك في تعليق ولو بكلمة شكر .
تحياتي.
الله يوفقك ع المجهود الجبار
ردحذفماشاء الله صحيح اني مني فاهم شي هههههههههههه بس والله واضح انه جهد عظيم وكذا . يب استمر ربي يسعدك ويحفظك @_<
ردحذف