התאמות נפוצות ל-Zoom Box - קופסת ZB

קופסת ה-Zoom Box – (קופסת ZB) מתאפיינת ביכולת לשים תמונה שמתחלפת לאייקון + טקסט + כיסוי צבע (או להיפך) עם אופציה להיות לחיצה.

ה-FLAT GRID מורכב מקופסאות ZB.

התאמות נפוצות

יש כל מיני התאמות נפוצות לאלמנט זום בוקס – קופסת ZB, כאן נרצה לפרט עליהן.

ביטול אפקט ה-Zoom In:

.zoom_box:hover .photo img {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}

עידון אפקט ה-Zoom In:

.zoom_box:hover .photo img {
 -webkit-transform: scale(1.05);
 -moz-transform: scale(1.05);
 -ms-transform: scale(1.05);
 -o-transform: scale(1.05);
 transform: scale(1.05);
}

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

.zoom_box .desc_txt {
 font-size:60px !important;
 font-weight:600;
 color:white !important;
 margin-top:100px !important;
}
.zoom_box .desc {
 padding-top:120px;
}

הפיכת קופסת ה-ZB – ל-Reverse Zoom Box – יש להגדיר Class של reversezoom ואז להשתמש בקוד הבא:

.reversezoom .zoom_box:hover .desc {
 opacity:0;
}
.reversezoom .zoom_box .desc {
 opacity:1;
}

עידון הכהות של קופסת ה-Zoom Box:

.zoom_box .desc {
  background:rgba(0,0,0,0.5) !important;
}

רספונסיביות

כדי לייצר רספונסיביות בקופסת ZB, יש להוריד את הכותרות למטה ולבטל את כל אפקטי מעבר העכבר, באמצעות הקוד הבא:

@media (max-width: 1000px) { /*-----ai---------Start Mobile-Full-Range-----------*/
.zoom_box .photo {
 overflow:hidden;
}
.zoom_box:hover .photo img, .zoom_box .desc {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
}
.zoom_box .desc {
 opacity:1;
 background-color:transparent !important;
}
 .zoom_box {
 overflow:visible;
 margin-bottom:80px;
}
.zoom_box .desc_wrap {
 position:absolute;
 top:auto;
 bottom:-90px;
 width:100%;
 min-height:80px; /*Two lines*/
}
.zoom_box .desc .desc_txt {
 text-align:center;
 font-size:28px;
 line-height:32px;
 padding:0px !important;
 width:100% !important;
 color:#333;
}
} /*-----ai---------End Mobile-Full-Range-----------*/

התאמות נפוצות ל-Zoom Box – קופסת ZB

התאמות נפוצות

רספונסיביות