|
|
| Line 1: |
Line 1: |
| | {{:Team:Oxford/Templates/Navi}} | | {{:Team:Oxford/Templates/Navi}} |
| | <html> | | <html> |
| − | | + | <head> |
| − | <body> | + | |
| − | | + | |
| − | <div align="center">
| + | |
| − | <h2>Under construction</h2>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
| + | |
| − | <div class="hovereffect">
| + | |
| − | <img class="img-responsive" src="http://placehold.it/350x200" alt="">
| + | |
| − | <div class="overlay">
| + | |
| − | <h2>Hover effect 4v2</h2>
| + | |
| − | <a class="info" href="#">link here</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| | .hovereffect { | | .hovereffect { |
| | width: 100%; | | width: 100%; |
| Line 102: |
Line 85: |
| | box-shadow: 0 0 5px #fff; | | box-shadow: 0 0 5px #fff; |
| | } | | } |
| | + | </head> |
| | + | <body> |
| | + | |
| | + | <div align="center"> |
| | + | <h2>Under construction</h2> |
| | + | </div> |
| | + | |
| | + | |
| | + | <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> |
| | + | <div class="hovereffect"> |
| | + | <img class="img-responsive" src="http://placehold.it/350x200" alt=""> |
| | + | <div class="overlay"> |
| | + | <h2>Hover effect 4v2</h2> |
| | + | <a class="info" href="#">link here</a> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | |
| | | | |
| | </body> </html> | | </body> </html> |
Revision as of 17:37, 8 October 2016
iGEM Oxford 2016 - Cure for Copper
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(75,75,75,0.7);
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.4);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
font-weight: normal;
margin: -52px 0 0 0;
padding: 62px 100px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
Under construction
