Difference between revisions of "Team:Pumas Mexico/Team"

Line 152: Line 152:
  
 
.hovereffect {
 
.hovereffect {
  width: 100%;
+
    width: 100%;
  height: 100%;
+
    height: 100%;
  float: left;
+
    float: left;
  overflow: hidden;
+
    overflow: hidden;
  position: relative;
+
    position: relative;
  text-align: center;
+
    text-align: center;
  cursor: default;
+
    cursor: default;
 
}
 
}
 
 
.hovereffect .overlay {
 
.hovereffect .overlay {
  position: absolute;
+
    width: 100%;
  overflow: hidden;
+
    position: absolute;
  opacity: 0;
+
    overflow: hidden;
  filter: alpha(opacity=0);
+
    left: 0;
  width: 55%;
+
top: auto;
  height: 81%;
+
bottom: 0;
  left: 22%;
+
padding: 1em;
  top: 10%;
+
height: 4.75em;
  border-radius: 80%;
+
background: #79FAC4;
  border: 2px solid #FFF;
+
color: #3c4a50;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
-webkit-transition: -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
+
transition: transform 0.35s;
  -webkit-transform: translate3d(50%,50%,0);
+
-webkit-transform: translate3d(0,100%,0);
  transform: translate3d(50%,50%,0);
+
transform: translate3d(0,100%,0);
}
+
 
+
.hovereffect:hover .overlay {
+
  background-color: rgba(0,0,0,0.3);
+
 
}
 
}
  
 
.hovereffect img {
 
.hovereffect img {
  display: block;
+
    display: block;
  position: relative;
+
    position: relative;
  -webkit-transition: all 0.35s;
+
-webkit-transition: -webkit-transform 0.35s;
  transition: all 0.35s;
+
transition: transform 0.35s;
 
}
 
}
  
 
.hovereffect:hover img {
 
.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="1.4" /><feFuncG type="linear" slope="1.4" /><feFuncB type="linear" slope="1.4" /></feComponentTransfer></filter></svg>#filter');
+
-webkit-transform: translate3d(0,-10%,0);
  filter: brightness(1.4);
+
transform: translate3d(0,-10%,0);
  -webkit-filter: brightness(1.4);
+
 
}
 
}
  
 
.hovereffect h2 {
 
.hovereffect h2 {
  text-transform: uppercase;
+
    text-transform: uppercase;
  text-align: center;
+
    color: #fff;
  position: relative;
+
    text-align: center;
  font-size: 17px;
+
    position: relative;
  padding: 10px;
+
    font-size: 17px;
  background-color: transparent;
+
    padding: 10px;
  color: #FFF;
+
    background: rgba(0, 0, 0, 0.6);
  padding: 1em 0;
+
float: left;
  opacity: 0;
+
margin: 0px;
  filter: alpha(opacity=0);
+
display: inline-block;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
  transition: opacity 0.35s, transform 0.35s;
+
  -webkit-transform: translate3d(-150%,-400%,0);
+
  transform: translate3d(-150%,-400%,0);
+
 
}
 
}
  
.hovereffect a, .hovereffect p {
+
.hovereffect a.info {
  color: #FFF;
+
    display: inline-block;
  padding: 1em 0;
+
    text-decoration: none;
  opacity: 0;
+
    padding: 7px 14px;
  filter: alpha(opacity=0);
+
    text-transform: uppercase;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
color: #fff;
  transition: opacity 0.35s, transform 0.35s;
+
border: 1px solid #fff;
  -webkit-transform: translate3d(-150%,-400%,0);
+
margin: 50px 0 0 0;
  transform: translate3d(-150%,-400%,0);
+
background-color: transparent;
 
}
 
}
 +
.hovereffect a.info:hover {
 +
    box-shadow: 0 0 5px #fff;
 +
}
 +
  
.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2, .hovereffect:hover .overlay {
+
.hovereffect p.icon-links a {
  opacity: 1;
+
float: right;
  filter: alpha(opacity=100);
+
color: #3c4a50;
  -webkit-transform: translate3d(0,0,0);
+
font-size: 1.4em;
  transform: translate3d(0,0,0);
+
 
}
 
}
  
 +
.hovereffect:hover p.icon-links a:hover,
 +
.hovereffect:hover p.icon-links a:focus {
 +
color: #252d31;
 +
}
 +
 +
.hovereffect h2,
 +
.hovereffect p.icon-links a {
 +
-webkit-transition: -webkit-transform 0.35s;
 +
transition: transform 0.35s;
 +
-webkit-transform: translate3d(0,200%,0);
 +
transform: translate3d(0,200%,0);
 +
}
 +
 +
.hovereffect p.icon-links a span:before {
 +
display: inline-block;
 +
padding: 8px 10px;
 +
speak: none;
 +
-webkit-font-smoothing: antialiased;
 +
-moz-osx-font-smoothing: grayscale;
 +
}
 +
 +
 +
.hovereffect:hover .overlay,
 +
.hovereffect:hover h2,
 +
.hovereffect:hover p.icon-links a {
 +
-webkit-transform: translate3d(0,0,0);
 +
transform: translate3d(0,0,0);
 +
}
 +
 +
.hovereffect:hover h2 {
 +
-webkit-transition-delay: 0.05s;
 +
transition-delay: 0.05s;
 +
}
 +
 +
.hovereffect:hover p.icon-links a:nth-child(3) {
 +
-webkit-transition-delay: 0.1s;
 +
transition-delay: 0.1s;
 +
}
 +
 +
.hovereffect:hover p.icon-links a:nth-child(2) {
 +
-webkit-transition-delay: 0.15s;
 +
transition-delay: 0.15s;
 +
}
 +
 +
.hovereffect:hover p.icon-links a:first-child {
 +
-webkit-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
  
 
}
 
}
Line 336: Line 377:
 
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
 
     <div class="hovereffect">
 
     <div class="hovereffect">
         <img class="img-responsive" src="T--Pumas_Mexico--ccn.jpg" alt="">
+
         <img class="img-responsive" src="wiki pumas/T--Pumas_Mexico--xry.jpg" alt="">
            <div class="overlay">
+
                <h2>Carolina Guadalupe Cruz Núñez</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="T--Pumas_Mexico--zda.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Zabdiel Díaz Morales</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="T--Pumas_Mexico--iaa.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Ilse  </h2>
+
                <h2>Alonso Anaya</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="loc.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Paola Benítez Trejo</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
</tr>
+
<tr>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="T--Pumas_Mexico--gil.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Carlos Andrés </h2>
+
<h2>Gil Gómez </h2><p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="T--Pumas_Mexico--fra.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Franklin Cruz Villegas</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="loc.jpg" alt="">
+
            <div class="overlay">
+
                <h2>José Carlos Barrioz Osorio</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="loc.jpg"alt="">
+
            <div class="overlay">
+
                <h2>Joaquin  </h2>
+
                <h2>Espinoza Evelio</h2>
+
<p>
+
Ing Mecatronica
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
</tr>
+
<tr>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="T--Pumas_Mexico--ebv.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Enrique </h2>
+
                <h2> Zeferino Barrera Vargas</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="T--Pumas_Mexico--agb.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Alejandro </h2>
+
                  <h2>Guzman Vendrell</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<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/8/86/T--Pumas_Mexico--hmix.jpg" alt="">
+
            <div class="overlay">
+
                <h2> Ilia Xrysw</h2>
+
<h2>Hernandez Mejia </h2>
+
<p>
+
                    QFB
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<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/f/f0/T--Pumas_Mexico--le.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Laura Elena figueroa Bravo</h2>
+
<p>
+
Medicina
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
</tr>
+
<tr>
+
<td>
+
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
+
    <div class="hovereffect">
+
        <img class="img-responsive" src="loc.jpg" alt="">
+
            <div class="overlay">
+
                <h2>Evelyn </h2> <h2> Polaco Mendoza</h2>
+
<p>
+
Biología
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<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/f/f5/T--Pumas_Mexico--AlanMu%C3%B1oz.png" alt="">
+
            <div class="overlay">
+
                <h2>Alán Fernando Muñoz González
+
 
+
</h2>
+
<p>
+
Genomic Sciences
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<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/b/b8/T--Pumas_Mexico--AnastasiaHernandez.png" alt="" height=300 width = 300>
+
            <div class="overlay">
+
                <h2>Anastasia Hernández Koutoucheva</h2>
+
<p>
+
Genomic Sciences
+
</p>
+
            </div>
+
    </div>
+
</div>
+
</td>
+
<td>
+
<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/5/52/T--Pumas_Mexico--RodrigoHernandez.png" alt="">
+
 
             <div class="overlay">
 
             <div class="overlay">
                 <h2>Rodrigo Hernández Velazquez</h2>
+
                 <h2>QFB</h2>
<p>
+
                <p class="icon-links">
Genomic Sciences
+
                    Hernandez Mejía Ilia Xrysw
</p>  
+
                </p>
 
             </div>
 
             </div>
 
     </div>
 
     </div>

Revision as of 19:24, 19 October 2016

Pumas_Mexico

QFB