Difference between revisions of "Team:Michigan/Team"

Line 7: Line 7:
 
     <link rel="stylesheet" type="text/css"
 
     <link rel="stylesheet" type="text/css"
 
       href="https://fonts.googleapis.com/css?family=Poiret+One">
 
       href="https://fonts.googleapis.com/css?family=Poiret+One">
 +
    <!-- Latest compiled and minified CSS -->
 +
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-    BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
     <style>
 
     <style>
 
       h1 {
 
       h1 {
Line 19: Line 21:
 
       padding-bottom: 50px;
 
       padding-bottom: 50px;
 
       }
 
       }
−
    </style>
+
    .hovereffect {
−
   </head>
+
   width: 100%;
−
<div class="container">
+
  height: 100%;
−
  <h1 style="text-align:center;"><font face ="Poiret One">Team Members</font></h1>
+
  float: left;
−
   <body>
+
  overflow: hidden;
−
  </body>
+
  position: relative;
−
 
+
  text-align: center;
−
</div>
+
   cursor: default;
 +
}
  
 +
.hovereffect .overlay {
 +
  position: absolute;
 +
  overflow: hidden;
 +
  width: 80%;
 +
  height: 80%;
 +
  left: 10%;
 +
  top: 10%;
 +
  border-bottom: 1px solid #FFF;
 +
  border-top: 1px solid #FFF;
 +
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 +
  transition: opacity 0.35s, transform 0.35s;
 +
  -webkit-transform: scale(0,1);
 +
  -ms-transform: scale(0,1);
 +
  transform: scale(0,1);
 +
}
  
 +
.hovereffect:hover .overlay {
 +
  opacity: 1;
 +
  filter: alpha(opacity=100);
 +
  -webkit-transform: scale(1);
 +
  -ms-transform: scale(1);
 +
  transform: scale(1);
 +
}
  
 +
.hovereffect img {
 +
  display: block;
 +
  position: relative;
 +
  -webkit-transition: all 0.35s;
 +
  transition: all 0.35s;
 +
}
  
 +
.hovereffect:hover img {
 +
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
 +
  filter: brightness(0.6);
 +
  -webkit-filter: brightness(0.6);
 +
}
  
 +
.hovereffect h2 {
 +
  text-transform: uppercase;
 +
  text-align: center;
 +
  position: relative;
 +
  font-size: 17px;
 +
  background-color: transparent;
 +
  color: #FFF;
 +
  padding: 1em 0;
 +
  opacity: 0;
 +
  filter: alpha(opacity=0);
 +
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 +
  transition: opacity 0.35s, transform 0.35s;
 +
  -webkit-transform: translate3d(0,-100%,0);
 +
  transform: translate3d(0,-100%,0);
 +
}
  
 +
.hovereffect a, hovereffect p {
 +
  color: #FFF;
 +
  padding: 1em 0;
 +
  opacity: 0;
 +
  filter: alpha(opacity=0);
 +
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
 +
  transition: opacity 0.35s, transform 0.35s;
 +
  -webkit-transform: translate3d(0,100%,0);
 +
  transform: translate3d(0,100%,0);
 +
}
  
 +
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
 +
  opacity: 1;
 +
  filter: alpha(opacity=100);
 +
  -webkit-transform: translate3d(0,0,0);
 +
  transform: translate3d(0,0,0);
 +
}
  
 +
    </style>
 +
  </head>
 +
<div class="container">
 +
  <h1 style="text-align:center;"><font face ="Poiret One">Team Members</font></h1>
 +
  <body>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 +
    <div class="hovereffect">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/e/ee/Michigan--WikiLogo.png" alt="">
 +
            <div class="overlay">
 +
                <h2>hello</h2>
 +
<p> <font face ="Poiret One">
 +
hello
 +
</font></p>
 +
            </div>
 +
    </div>
 +
</div>
 +
  </body>
 
</html>
 
</html>

Revision as of 21:18, 16 August 2016

Home Project Modeling Team BioBrick Human Practices Safety Awards

  • Team Members

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello

    hello