קופסת ה-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-----------*/