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

شاركه على +Googleأضفه الى Deliciousشاركه على Twetter شاركه على Facebookأضفه الى StumbleUpon أضفه الى Digg

هدا أحد التأثيرات الجميلة والرائعة التي يمكنك  تطبيقها على الصور ,حيث  تخولك هده الاضافة أن تضع وصف أو تعريف  لأي صورة  وعند نشر الصورة لايضهر الوصف الدي وضعته بل  عند تأشير الزائر  على الصورة  تبرز الصورة قليلا و يخرج الوصف الدي وضعته  من الاسفل أو الاعلى أو اليمين أو اليسار حسب ما تختار وسنتطرق لهدا في الشرح ,وللعلم الاضافة تعمل بتقنية css فقط لدالك ستلاحض سرعة في الاداء والضهور,

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

 

 ثم قم بالضغط على     ctrl + f   ثم قم بالبحث على  الكود التالي

 ]]></b:skin>

 ثم ضع الكود التالي فوقه مباشرة

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

.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 rgbaundefined0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgbaundefined0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgbaundefined0, 0, 0, 0.5);
    -moz-transform: scaleundefined1.05, 1.05);
    -webkit-transform: scaleundefined1.05, 1.05);
    -ms-transform: scaleundefined1.05, 1.05);
    -o-transform: scaleundefined1.05, 1.05);
    transform: scaleundefined1.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&#039;s, so it&#039;s hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgbaundefined0, 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 rgbaundefined0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgbaundefined0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgbaundefined0, 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: translateundefined0, 100%);
    -webkit-transform: translateundefined0, 100%);
    -ms-transform: translateundefined0, 100%);
    -o-transform: translateundefined0, 100%);
    transform: translateundefined0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}

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

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

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

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

.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: translateundefined0, -100%);
    -webkit-transform: translateundefined0, -100%);
    -ms-transform: translateundefined0, -100%);
    -o-transform: translateundefined0, -100%);
    transform: translateundefined0, -100%);
}

 ثم قم بحفض القالب

• كيفية تفعيل التأثير 

عندما تهم بكتابة موضوع  وتريد وضع الصورة


اضغط على  تبويب HTML  ثم ضع الكود التالي


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

**ملاحضة :**

1-يمكنك تغير عرض  اللوح الدي ينزلق وبه وصف الصورة  بتغير  width:263  الى رقم أكبر أو أصغر ليتناسب مع الصورة

2-غير الاشياء الأخرى  رابط  و وصف  الصورة

3-ثم ينكنك تغير مكان انزلاق الوصف اما يمين أو يسار أو فوق أو تحث
فقط غير down والمشار لها بالون الأحمر في الكود ب up أو left أو right

*ثم عند انتهائك اضغط على التبويب تأليف واكمل تدوينتك


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

Tweet

Social Sharing Widget bychamelcool

التصنيف : أكواد و هكات