Difference between revisions of "Team:Oxford/Notebook"

Line 5: Line 5:
  
 
.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 {
−
  width: 100%;
+
width:100%;
−
  height: 100%;
+
height:100%;
−
  position: absolute;
+
position:absolute;
−
  overflow: hidden;
+
overflow:hidden;
−
  top: 0;
+
top:0;
−
  left: 0;
+
left:0;
−
  background-color: rgba(75,75,75,0.7);
+
opacity:0;
−
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
+
background-color:rgba(0,0,0,0.5);
−
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
+
-webkit-transition:all .4s ease-in-out;
−
}
+
transition:all .4s ease-in-out
−
 
+
−
.hovereffect:hover .overlay {
+
−
  background-color: rgba(48, 152, 157, 0.4);
+
 
}
 
}
  
 
.hovereffect img {
 
.hovereffect img {
−
  display: block;
+
display:block;
−
  position: relative;
+
position:relative;
 +
-webkit-transition:all .4s linear;
 +
transition:all .4s linear;
 
}
 
}
  
 
.hovereffect h2 {
 
.hovereffect h2 {
−
  text-transform: uppercase;
+
text-transform:uppercase;
−
  color: #fff;
+
color:#fff;
−
  text-align: center;
+
text-align:center;
−
  position: relative;
+
position:relative;
−
  font-size: 17px;
+
font-size:17px;
−
  padding: 10px;
+
background:rgba(0,0,0,0.6);
−
  background: rgba(0, 0, 0, 0.6);
+
-webkit-transform:translatey(-100px);
−
  -webkit-transform: translateY(45px);
+
-ms-transform:translatey(-100px);
−
  -ms-transform: translateY(45px);
+
transform:translatey(-100px);
−
  transform: translateY(45px);
+
-webkit-transition:all .2s ease-in-out;
−
  -webkit-transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
+
transition:all .2s ease-in-out;
−
  transition: all 0.4s  cubic-bezier(0.88,-0.99, 0, 1.81);
+
padding:10px;
 
}
 
}
  
−
.hovereffect:hover h2 {
+
.hovereffect a.info {
−
  -webkit-transform: translateY(5px);
+
text-decoration:none;
−
  -ms-transform: translateY(5px);
+
display:inline-block;
−
  transform: translateY(5px);
+
text-transform:uppercase;
 +
color:#fff;
 +
border:1px solid #fff;
 +
background-color:transparent;
 +
opacity:0;
 +
filter:alpha(opacity=0);
 +
-webkit-transition:all .2s ease-in-out;
 +
transition:all .2s ease-in-out;
 +
margin:50px 0 0;
 +
padding:7px 14px;
 
}
 
}
  
−
.hovereffect a.info {
+
.hovereffect a.info:hover {
−
  display: inline-block;
+
box-shadow:0 0 5px #fff;
−
  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 {
+
.hovereffect:hover img {
−
  opacity: 1;
+
-ms-transform:scale(1.2);
−
  filter: alpha(opacity=100);
+
-webkit-transform:scale(1.2);
−
  -webkit-transform: scale(1);
+
transform:scale(1.2);
−
  -ms-transform: scale(1);
+
−
  transform: scale(1);
+
 
}
 
}
  
−
.hovereffect a.info:hover {
+
.hovereffect:hover .overlay {
−
  box-shadow: 0 0 5px #fff;
+
opacity:1;
 +
filter:alpha(opacity=100);
 +
}
 +
 
 +
.hovereffect:hover h2,.hovereffect:hover a.info {
 +
opacity:1;
 +
filter:alpha(opacity=100);
 +
-ms-transform:translatey(0);
 +
-webkit-transform:translatey(0);
 +
transform:translatey(0);
 +
}
 +
 
 +
.hovereffect:hover a.info {
 +
-webkit-transition-delay:.2s;
 +
transition-delay:.2s;
 
}
 
}
 
</style>
 
</style>
Line 100: Line 104:
 
         <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/c/c9/Overnight_cultures_plate_reader_sam_oxford_2016.jpeg" alt="">
 
         <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/c/c9/Overnight_cultures_plate_reader_sam_oxford_2016.jpeg" alt="">
 
         <div class="overlay">
 
         <div class="overlay">
−
           <h2>Hover effect 4v2</h2>
+
           <h2>Hover effect 1</h2>
 
           <a class="info" href="#">link here</a>
 
           <a class="info" href="#">link here</a>
 
         </div>
 
         </div>

Revision as of 17:43, 8 October 2016

iGEM Oxford 2016 - Cure for Copper

Under construction

Hover effect 1

link here