提交

about/about03.html

@@ -231,9 +231,13 @@
                         </div>
                         <div class="contentText transition-3">
                             <div class="contenttitle">科研机构</div>
+                            <!--  -->
+                        </div>
+                        <div class="maskContainer">
+                            <a href="#">查看详情</a>
                             <p>联合各研究机构、院所助力科技  成果转化</p>
                         </div>
-                        <a href="#">查看详情</a>
+                        
                     </div>
                     <div class="brand__thumb  category__item transition-3">
                         <div class="business-effect">
@@ -245,9 +249,12 @@
                         </div>
                         <div class="contentText transition-3">
                             <div class="contenttitle">金融支持</div>
+                            
+                        </div>
+                        <div class="maskContainer">
+                            <a href="#">查看详情</a>
                             <p>以金融 “活水”灌溉产业创新集群</p>
                         </div>
-                        <a href="#">查看详情</a>
                     </div>
                     <div class="brand__thumb category__item transition-3">
                         <div class="business-effect">
@@ -259,9 +266,12 @@
                         </div>
                         <div class="contentText transition-3">
                             <div class="contenttitle">服务保障</div>
+                            
+                        </div>
+                        <div class="maskContainer">
+                            <a href="#">查看详情</a>
                             <p>赋能企业优化创新服务生态</p>
                         </div>
-                        <a href="#">查看详情</a>
                     </div>
                 </div>
             </div>

css/about3.css

@@ -254,18 +254,11 @@ a:active{
 }
 .contentText{
     position: absolute;
-    top:50%;
+    bottom:20%;
     width: 72%;
     left: 14%;
 }
-.contentText p{
-    margin:0;
-    padding:0;
-    font-size: 24px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #FFFFFF;
-}
+
 .category__item {
     cursor: pointer;
     border:2px solid transparent;
@@ -294,7 +287,7 @@ a:active{
     overflow: hidden; 
     z-index: 2; 
 }
-.category__item:hover a { 
+.category__item:hover .maskContainer {
     opacity: 1; 
     z-index:9999;
     position: absolute;
@@ -302,6 +295,24 @@ a:active{
     transform: translateY(-50%);
     left:50%;
     transform: translateX(-50%);
+    width:90%;
+}
+.maskContainer p{
+    margin:0;
+    padding:0;
+    font-size: 24px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #FFFFFF;
+}
+.maskContainer a{
+    font-size: 16px; 
+    color: #fff; 
+    width: 118px; height: 38px; 
+    line-height: 38px; 
+    border: 1px solid #fff;
+    display: block;
+    margin:0 auto 20px auto;
 }
 .category__item .business-effect .e-img-l { 
     position: absolute;
@@ -322,14 +333,9 @@ a:active{
 }
 .business-effect .e-img-r { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
 .business-effect .e-img-r img { display: block;height: 100%; width: 100%; }
-.category__item>a {
+.category__item .maskContainer {
     opacity: 0; 
     display: block; 
-    font-size: 16px; 
-    color: #fff; 
-    width: 118px; height: 38px; 
-    line-height: 38px; 
-    border: 1px solid #fff; 
     /* margin: 10% auto;  */
     -webkit-transition: all 0.5s; 
     -o-transition: all 0.5s;