|
|
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> |