add hover effect

css/list-style.css

@@ -831,6 +831,12 @@ a {
           box-shadow: 0 1px 10px #eee;
   margin: 0 0 1.5rem;
   border: none;
+  overflow: hidden;
+}
+
+.infoContent .card:hover .card__bgImg {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
 }
 
 .infoContent .card__bgImg {
@@ -848,6 +854,8 @@ a {
   -ms-flex-align: center;
       align-items: center;
   -webkit-box-pack: center;
+  -webkit-transition: all .4s;
+  transition: all .4s;
 }
 
 .infoContent .card-body {

css/list-style.scss

@@ -691,6 +691,10 @@ a {
         box-shadow: 0 1px 10px #eee;
         margin: 0 0 1.5rem;
         border: none;
+        overflow: hidden;
+        &:hover .card__bgImg {
+            transform: scale(1.1);
+        }
         &__bgImg {
             height: 293px;
             background-repeat: no-repeat;
@@ -702,6 +706,7 @@ a {
             -webkit-box-align: center;
             align-items: center;
             -webkit-box-pack: center;
+            transition: all .4s;
         }
         &-body {
             padding: 0.5rem 1rem;

js/index-designer.js

@@ -318,8 +318,7 @@ function renderCard(content, i = 0){
         cardData += `<div class="col-md-4">
                         <a href="" target="_blank">
                         <div class="card">
-                            <div class="card__bgImg" style="background-image: url(${data[i]['imgURL']});">
-                            </div>
+                                <div class="card__bgImg" style="background-image: url(${data[i]['imgURL']});"></div>
                             <div class="card-body">
                             <h5 class="card-title card__title mt-0">${data[i]['title']}</h5>
                             <p class="card-text mb-0">
@@ -380,7 +379,9 @@ function renderTabContent(content, meta) {
                 cardData += `<div class="col-lg-6 col-xl-4">
                                 <a href="" target="_blank">
                                 <div class="card">
-                                    <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
+                                    <div style="overflow: hidden;">
+                                        <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
+                                        </div>
                                     </div>
                                     <div class="card-body">
                                     <h5 class="card-title card__title mt-0">${content[i].Carddata[j]['title']}</h5>
@@ -480,7 +481,9 @@ function loadMore(designer) {
                     append += `<div class="col-lg-6 col-xl-4">
                                     <a href="" target="_blank">
                                     <div class="card">
-                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                        <div style="overflow: hidden;">
+                                            <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                            </div>
                                         </div>
                                         <div class="card-body">
                                         <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
@@ -518,8 +521,10 @@ function loadMore(designer) {
                     append += `<div class="col-lg-6 col-xl-4">
                                     <a href="" target="_blank">
                                     <div class="card">
-                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
-                                            <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
+                                        <div style="overflow: hidden;">
+                                            <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                                <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
+                                            </div>
                                         </div>
                                         <div class="card-body">
                                         <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
@@ -553,7 +558,9 @@ function loadMore(designer) {
                     append += `<div class="col-lg-6 col-xl-4">
                                     <a href="" target="_blank">
                                     <div class="card">
-                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                        <div style="overflow: hidden;">
+                                            <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                            </div>
                                         </div>
                                         <div class="card-body">
                                         <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>