התאמות נפוצות ל-Sliding Box – קופסת SB

קופסת Sliding Box מתאפיינת בכותרת ותמונה משולבות באלמנט אחד. קופסת SB היא אלמנט שניתן להצמיד לו אנימציה.

כברירת מחדל, הכותרת מופיעה מתחת בפס צבעוני (הצבע ניתן לעריכה באופן גלובלי לאתר תחת BeTheme Options > Colors)
כמו כן, כברירת מחדל – יש תנועה של התמונה כלפי מעלה, ויש "משולש" צבע נשלף במקביל לתנועה הזו.

ניתן לבצע התאמות מכל הסוגים לאלמנט ולעצב אותו לנראות הרצויה.

מומלץ להוסיף Class של sb01 לאזור ולבצע את ההתאמות באופן ספציפי לאזור (ולא באופן גורף: כלל-אתר)

הסתרת ה"משולש" הנשלף:

.sb01 .column_sliding_box .desc_wrapper:after {
 border-bottom-color: transparent;
}

הגדלת העובי של פס הכותרת:

.sb01 .sliding_box .desc_wrapper {
 padding-top:30px;
 padding-bottom:30px;
}

שינויי גודל וסגנון:

.sb01 .sliding_box h4 {
 font-size:45px;
 letter-spacing:0.05ex;
}

העברת הכותרת להיות מעל התמונה + בצבע עם שקיפות למחצה:

.sb01 .sliding_box .desc_wrapper {
 position:absolute;
 bottom:0px;
 background-color:rgba(19,106,155,0.75);
}
.sb01 .sliding_box {
 overflow:hidden;
}

העברת הכותרת להיות מעל לתמונה ללא רקע (כותרת שקופה) – ניתן להגדיר גובה מתחתית התמונה

.sb01 .sliding_box .desc_wrapper {
 position:absolute;
 bottom:20px;
 background:transparent;
}

ביטול האנימציה של התנועה למעלה במעבר עכבר:

.sb01 .sliding_box .photo_wrapper,.sliding_box:hover .photo_wrapper {
 bottom:0px;
}

הוספת אייקון מימין לכותרת:

.sb01 .sliding_box .desc_wrapper {
 min-height:50px;
}
.sb01 .sliding_box h4 {
background:url("#") no-repeat center right;
 position:absolute;
 line-height:150px;
 top:-50px;
 padding-right:90px;
 width:100%;
 text-align:right;
}

תנועה של הכותרת במעבר העכבר: (כולל ריכוך האנימציה) – ניתן להזיז אופקית ו/או אנכית.

.sb01 .sliding_box:hover .desc_wrapper {
 transform: translate(-30px,0px);
}
.sb01 .sliding_box:hover .desc_wrapper, .sb01 .sliding_box .desc_wrapper
{
 -webkit-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}

התאמות פרטניות לכותרת (תזוזה שונה בין קופסת SB אחת לשנייה) – יש להגדיר Class של tmove1, tmove2,… ואז להשתמש בקוד הבא:

.sb01 .tmove1 h4 {
 position:relative;
 left:-60px;
}
.sb01 .tmove2 h4 {
 position:relative;
 left:50px;
}

העברת הכותרות מתחתית התמונה לראש התמונה:

.sb01 .column_sliding_box .desc_wrapper {
 bottom:auto;
 top:20px;
}