3-11. 影像排版與互動特效

在標籤面板的內容區域中安排好圖文 (以下參考使用, 不一定要相同的設定)

#sec3 .tab-content { 
  padding-top: 40px; background: var(--c-assist2-01);
  background: linear-gradient(180deg, var(--c-assist2-01) 0%, 
                                      var(--c-assist2-01) 50%, 
                                      var(--c-assist2-00) 90%); 
}
#sec3 .tab-content .col-12 { 
  text-align: center; margin-bottom: 20px; 
  transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1); 
}
#sec3 .tab-content img { 
  cursor: pointer; transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1);
  border-radius: 10px; max-width: 100%; height: auto; 
  display: block; margin: 0 auto 10px;
}

設計滑入影像放大加光暈，而其餘的影像則縮小淡化

CSS 部份

.scale_s { transform: scale(0.9); opacity: 0.2; }
.scale_b { transform: scale(1.1); }
.scale_b img { box-shadow: 0 0 10px 3px var(--c-assist2-03); }

JS 部份

$('#sec3 .col-12').hover(
  function(){ 
    $('#sec3 .col-12').not(this).addClass('scale_s'); 
    $(this).addClass('scale_b'); 
  }, 
  function(){ 
    $('#sec3 .col-12').removeClass('scale_s').removeClass('scale_b'); 
  }
);