add hover effect

css/style.css

@@ -1769,6 +1769,13 @@ body {
   background-position: center;
   background-size: cover;
   cursor: pointer;
+  -webkit-transition: all .4s;
+  transition: all .4s;
+}
+
+.sec-match__imgfr:hover {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
 }
 
 .sec-match__designer {

css/style.scss

@@ -1438,6 +1438,10 @@ body {
         background-position: center;
         background-size: cover;
         cursor: pointer;
+        transition: all .4s;
+        &:hover {
+            transform: scale(1.1);
+        }
     }
     &__designer {
         // background-image: url(https://cloud.hhh.com.tw/upload/_hdesigner/img_path_611_20190318172644.jpg);

js/index_match.js

@@ -44,8 +44,10 @@ function renderMatch(matchData){
     for(let i = 0; i < matchData.length; i++){
         str += `<div class="row align-items-center py-3 justify-content-center text-center container__row">
                     <div class="col">
-                        <div class="sec-match__imgfr mx-auto" style="background-image: url('${matchData[i].WorkImg}');"
-                        onclick="window.open('${matchData[i].DesignerLink}');"></div>
+                        <div style="overflow: hidden;">
+                            <div class="sec-match__imgfr mx-auto" style="background-image: url('${matchData[i].WorkImg}');"
+                            onclick="window.open('${matchData[i].DesignerLink}');"></div>
+                        </div>
                     </div>
                     <div class="col">
                     <div class="sec-match__designer mx-auto" style="background-image: url('${matchData[i].DesignerImg}');">