Revision as of 20:37, 1 November 2017

@@ Line 97: / Line 97: @@
 <style>
+html, body {
+  padding: 0; margin: 0;
+  height: 100%;
+}
 .contain{
-	  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  height: 100%;}
+.contain .box {
+     height: 50%;
+     width: 33.333%;
+     background-repeat: no-repeat;
+     background-size: 115%;
+     background-position: 50% 50%;
+     -webkit-transition: background-size 0.275s ease-in-out;
+     transition: background-size 0.275s ease-in-out;
+     flex-grow: 1;
+     cursor: pointer;
+     -webkit-user-select: none;
+     -moz-user-select: none;
+     -ms-user-select: none;
+     user-select: none;
+}
+.contain .box:hover{
+       background-size: 100%;
+     }
+    .box-info {
+       background: rgba( 35, 35, 35, 0.7 );
+       box-sizing: border-box;
+       height: 100%;
+       width: 100%;
+       -webkit-transition: opacity 0.45s ease-in-out;
+     transition: opacity 0.45s ease-in-out;
+       text-align: center;
+       padding: 20% 0 0;
+       font-weight: 900;
+       font-size: 30px;
+       font-family: "Lato", Helvetica, Arial, sans-serif;
+       color: #fff;
+       opacity: 0;
+  }
+       .box-info:hover{
+         opacity: 1;
+       }
+     }
+   }
 }
-.contain img {z-index:-1}
-.contain a{
-position: absolute;
-top: 50%;
-left:50%;
-opacity: 0;
-}
-.contain:hover{
-background-color: rgba(0,0,0,0.5);
-}
-.contain:hover a{opacity: 1;}
-.contain img{width: 100%;}
 </style>
-<div class="pure-g">
-<div class="pure-u-1-3 contain"><img src="https://static.igem.org/mediawiki/2017/3/36/T-NUDT_CHINA-GOAD5.jpeg" alt=""><div><a>test</a></div></div>
+<div class="contain">
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/3/3e/T-NUDT_CHINA-GOAD4.jpeg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/3/36/T-NUDT_CHINA-GOAD5.jpeg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/6/69/T-NUDT_CHINA-GOAD6.jpeg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/2/2d/T-NUDT_CHINA-GOAD1.jpeg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/6/67/T-NUDT_CHINA-GOLD9.jpg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/7/77/T-NUDT_CHINA-GOAD7.jpeg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/8/8f/T-NUDT_CHINA-GOAD2.jpeg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/8/8d/T-NUDT_CHINA-GOAD8.jpeg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
+  <div class="box" style="background-image: url(https://static.igem.org/mediawiki/2017/8/8b/T-NUDT_CHINA-GOAD3.jpeg);background-repeat: no-repeat;">
+    <div class="box-info">
+      Such Bench
+    </div>
+  </div>
 </div>

Difference between revisions of "Team:NUDT CHINA/HP/Gold Integrated"

Revision as of 20:37, 1 November 2017

Gold_Integrated