Difference between revisions of "Team:Hong Kong HKUST/Team"

Line 127: Line 127:
 
       </script>
 
       </script>
  
       <h1>our advisors</h1>
+
       <h1>Our Advisors</h1>
 
<style>
 
<style>
div.gallery {
+
.container {
    margin: 5px;
+
  position: relative;
    border: 1px solid #ccc;
+
  width: 50%;
    float: left;
+
    width: 180px;
+
 
}
 
}
  
div.gallery:hover {
+
.image {
    border: 1px solid #777;
+
  display: block;
 +
  width: 100%;
 +
  height: auto;
 
}
 
}
  
div.gallery img {
+
.overlay {
    width: 100%;
+
  position: absolute;
    height: auto;
+
  top: 0;
    border-radius: 50%
+
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  transition: .5s ease;
 +
  background-color: #008CBA;
 
}
 
}
  
div.desc {
+
.container:hover .overlay {
    padding: 15px;
+
  opacity: 1;
    text-align: center;
+
}
}  
+
 
 +
.text {
 +
  color: white;
 +
  font-size: 20px;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%);
 +
}
  
 
</style>
 
</style>
  
<div class="gallery">
+
<div class="container">
   <a target="_blank" href="https://static.igem.org/mediawiki/2017/thumb/6/6d/Hkusteric.png/601px-Hkusteric.png">
+
   <img src="https://static.igem.org/mediawiki/2017/thumb/6/6d/Hkusteric.png/601px-Hkusteric.png" alt="Eric" class="image">
    <img src="https://static.igem.org/mediawiki/2017/thumb/6/6d/Hkusteric.png/601px-Hkusteric.png" alt="Eric" width="300" height="200">
+
   <div class="overlay">
   </a>
+
    <div class="text">Hello World</div>
  <div class="desc">Add a description of the image here</div>
+
  </div>
 
</div>
 
</div>
  

Revision as of 07:43, 3 September 2017

HKUST iGEM Team 2017

Name:


coorX: CoorY:

Team william Devi Alvin Harold Harold

Our Advisors

Eric
Hello World


Footer