أضافة صورة مع انزلاق الوصف بأستخدام CSS3 لبلوجر

بسم الله الرحمن الرحيم

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

اليوم لدي أضافة وهذه الخدعة هي من أفضل الأضافاتcss3 للصور في مدونات البلوجر
بحيث أنك تستطيع وضع وصف للصورة التي تضعها في المواضيع هذا الوصف يكون
غير مرئي (مخفية)ولكن عند وضع  مؤشر الماوس فوق الصورة يظهر الوصف الذي قمت أنت بكتابته بشكل سلس وجميل مع خلفية أسفل الصورة
وللعلم أن هذه الأضافة لاتؤثر على سرعة وتحميل المدونة لأنها لاتحتوي على جافاسكربت
jQuery فقط بعض خصائص css3
يمكنك أستخدام طريقة ظهور الوصف للصورة بأربع طرق (سواء أن تظهر أسفل الصورة أوفوقها أو حتى يمين ويسار الصورة)

صورتين لمعاينة الفكرة وطريقتها

 قبل مرور مؤشر الماوس فوق الصورة

بعد مرور مؤشر الماوس فوق الصورة

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

توجه للوحة التحكم الخاصة بمدونتك

أختار تصميم

تحريرhtml

توسيع للقالب

أبحث عن الكود التالي

]]></b:skin>

 بعد ذلك أضف خصائص css3  قبلها مباشرة

 .imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 14px;
}

.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    right: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
    color: white;
}

.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}

/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    left: 0;
    right: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-right: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    right: 0;
    bottom: auto;
  /* reset from default */
    padding-right: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}

وأعمل حفظ للقالب

كيفية استخدامها؟

 
      انتقل إلى تحرير HTML (صندوق تحرير الرسائل أختار html بدلا من تأليف)
    وأضف الرمز التالي داخل ولكن بعد أن تقوم بتعديل رابط الصورة وكذلك الوصف وجهة ظهور الوصف في الصورة

<center><div class="imagepluscontainer" style="width:263px;">
<img src="هنا ضع رابط الصورة">
<div class="desc downslide">
هنا ضع وصف للصورة
</div>
</div></center>

أما العبارة المشارة لها بلون الأحمر في الكود السابقdown

فهي لتغيير جهة سقوط الوصف للصورة سواء وضعتها right أو left

أو أتركها كما هي أي تظهر أسفل الصورة

وكذلك الأرقام المشار لها بلون الأزرق فهي لضبط العرض الصورة

وأخيرا 

أتمنى أن تنال على أعجبكم

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