change ads to better design

Author: RageCoke1466

src/_locales/en.yml

@@ -102,6 +102,8 @@ about_feedback:
 about_feedback_message:
   message: If you have any suggestion or faced any issues, please create a Github issue
 #Image Search
+support_devloper:
+  message: Click Ads To Support Developer
 guessing_keyword:
   message: Keyword
 download:

src/_locales/zh_CN.yml

@@ -55,6 +55,8 @@ avaiable_engine:
 experience:
     message: 体验设置
 #Image Search
+support_devloper:
+  message: 点击广告支持开发者
 guessing_keyword:
   message: 关键词
 display_mode:

src/_locales/zh_TW.yml

@@ -57,6 +57,8 @@ avaiable_engine:
 experience:
     message: 體驗設定
 #Image Search
+support_devloper:
+  message: 點擊廣告支持開發者
 guessing_keyword:
   message: 關鍵詞
 display_mode:
@@ -91,7 +93,7 @@ clear:
   message: 清除
 no_size_info:
   message: 無圖片大小資訊
-#About  
+#About
 about_what:
   message: 二箱是什麼?
 about_what_message_0:

src/imageSearch/routes/ImageSearchResult.jsx

@@ -19,15 +19,52 @@ const ResultContainer = styled.div`
   padding-right: 2%;
   padding-top:15px;
   .ads{
+    position: relative;
     text-align: center;
     width: 100%;
     height: 100%;
-    img {
+    .adsTag{
+       max-width: 90%;
+       position: absolute;
+       top: 20%;
+       left: 50%;
+       -webkit-transform: translateX(-50%);
+       transform: translateX(-50%);
+       visibility: hidden;
+      }
+      
+    img{
       margin-top: 10%;
-      max-width: 80%;
-      max-height: 80%;
+      max-width: 90%;
+      max-height: 80%; 
+    }  
+  }
+  .ads:hover{
+    position: relative;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    
+    .adsTag{
+      max-width: 90%;
+      position: absolute;
+      top: 20%;
+      left: 50%;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      visibility: visible;
+      transition: visibility 2s;
     }
+    
+    img{
+      margin-top: 10%;
+      max-width: 90%;
+      max-height: 80%; 
+      opacity: 0.2;
+      transition: opacity 2s
+    }  
   }
+  
   .ant-row-flex {
     align-items: stretch;
   }
@@ -98,8 +135,8 @@ class ImageSearchResult extends React.Component {
               </Col>
               <Col span={4}>
                 <div className="ads">
-                  <div>Ads</div>
                   <a target="_blank"  href="https://ainoob.com/ads/first">
+                    <h2 className = "adsTag">{i18n("support_devloper")}</h2>
                     <img border="0" src="https://ainoob.com/ads.jpg" />
                   </a>
                 </div>