1- وهناك حاجة يعمل مع CSS3 خالص أي لا البرامج النصية أي الثقيلة
2- يمكن استخدامها في 4 طرق (أعلى، أسفل، يسار، أسفل).
3- تخفيف تأثير التحويم.
4- سهلة الاستخدام وبعض الميزات الأخرى.
المذكورة أعلاه هي بعض ميزات من هذه الخدعة، دعونا الآن نرى كيفية إضافة استخدامه، أولا مشاهدة التجريبي
كيفية إضافة لوحة الوصف المنزلقة الى الصور؟
أولا سنضيف كود CSS إلى المدونة، اتبع التعليمات أدناه لإضافة كود CSS,
1- أولا الذهاب إلى لوحة رئيسية بلوجر > قالب
2- انقر على تحرير HTML
3- انقر على زر متابعة
4- ابحث الآن على الكود أدناه في القالب .]]></b:skin>إضافة كود أدناه مباشرة فوقه/ قبل من الكود أعلاه،
/*================ Sliding Description Panel For Images By Stupcomp.blogspot.com ================*/
.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 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 */
left: 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 right edge of the image ###*/
.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: 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 left edge of the image ###*/
.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: 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%);
}
/*================ Sliding Description Panel For Images By Stupcomp.blogspot.com ================*/
.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 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 */
left: 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 right edge of the image ###*/
.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: 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 left edge of the image ###*/
.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: 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%);
}
/*================ Sliding Description Panel For Images By Stupcomp.blogspot.com ================*/
كيفية استخدامها؟
أثناء تحرير المشاركة،
1- انتقل إلى التبويب تحرير HTML
2- إضافة كود أدناه،<center><div class="imagepluscontainer" style="width:263px;"> <img src="URL/عنوان الصورة هنا"> <div class="desc downslide">أضف وصفك هنا</div> </div></center>
- الآن استبدال أضف وصفك هنا مع الوصف الخاص بك، يمكنك أيضا إضافة ارتباطات في الوصف الخاص بك باستخدام هذا الكود
<a herf="LINK HERE">TEXT HERE</a>- استبدل عنوان الصورة هنا/URL مع عنوان URL صورتك
- إذا كنت ترغب في تغيير موقف / مكان لوحة الوصف المتحرك استبدل فقط down الى right، up أو left
- ضبط عرض لوحة وفقا لعرض صورة لضبط عرض لوحة تعديل ببساطة width:263px;
أتمنى أن تكونوا قد أعجابكم هذا ، أيضا مشاركة تعليقاتكم حول الخدعة :) .