اضف الان تعليق الى الصور بالــcss3 وبدون اوامر javascript

بسم الله الرحمان الرحيم السلام عليكم ورحمة الله وبركاته 

اليوم وبعد غياب مستمر اعود لإقدم تدوينة على السريع ساخصصها لتقديم هاك جد جميل يقوم باضافة تعليق الى الصور بطريقة مذهلة عبر استعمال تقنية css3 في السابق كان ولابد من تواجد الجفاسكربت ضمن الهاك لكن ليس بعد الان فالهاك لن يحتاج الى ذلك

مثال حي :

ضع هنا التعليق
وضف الصورة هنا.

لمستخدمي منصة بلوجر : 

اتجه صوب Edit HTML ثم ابحث عن

]]></b:skin>

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

/* Post images with CSS animated captions */

#post-image {
}

#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}

#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

#figure:hover .caption {
margin-bottom:0px;
}

#post-image .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

#post-image .caption b {
text-shadow: 0px 2px 0px #000;
}
#post-image .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}

الان اتجه الى المحرر وغيره الى وضعية HTML mode

وضع هذا الكود الموالي : 

<div id="post-image">
 <div id='figure'>
 <img src="هنا ضع رابط الصورة"/>
 <span class='caption'>
 <b>ضع هنا التعليق</b>
وضف الصورة هنا.
 </span>
 </div>
</div>

لمستخدمي الوردبريس اتجه نحو Appearance > Editor > Stylesheet

انسخ كود css والصقه في ملف   style.css

ثم احفظ