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

調整第三、四個section區 CSS 樣式

第三、四個section區：設計頁籤置中並設計頁籤的樣式，留意手機版時的呈現，如何調整才理想？

第三個section區：設計內容區的寬度滿版的Banner影像，思考手機版、桌機版如何呈現才理想？

第三個section區：設計內容區的影像在大螢幕時4欄排版、在小螢幕時2欄排版。

第四個section區：設計內容區的影像依螢幕寬度調整欄數，6欄=>4樓=>3欄=>2欄排版。

設計第四個section區中的影像：滑鼠滑入的影像放大加光暈，而其餘的影像則縮小淡化

CSS樣式設計

.scale_s { transform: scale(0.7); opacity: 0.2; }
.scale_b { transform: scale(1.3); box-shadow: 0 0 10px 3px red; }

JS程式設計

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