Difference between revisions of "Team:DTU-Denmark/hovereffect"

Line 1: Line 1:
 
.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;
−
opacity:0;
+
  opacity:0;
−
background-color:rgba(0,0,0,0.5);
+
  background-color:rgba(0,0,0,0.5);
−
-webkit-transition:all .2s ease-in-out;
+
  -webkit-transition:all .2s ease-in-out;
−
transition:all .2s ease-in-out
+
  transition:all .2s ease-in-out
 
}
 
}
  
 
.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:20px;
+
  font-size:20px;
−
background:rgba(0,0,0,0.6);
+
  background:rgba(0,0,0,0.6);
−
-webkit-transform:translatey(20vw);
+
  -webkit-transform:translatey(20vw);
−
-ms-transform:translatey(20vw);
+
  -ms-transform:translatey(20vw);
−
transform:translatey(20vw);
+
  transform:translatey(20vw);
−
-webkit-transition:all .3s ease-in-out;
+
  -webkit-transition:all .3s ease-in-out;
−
transition:all .3s ease-in-out;
+
  transition:all .3s ease-in-out;
−
padding:10px;
+
  padding:10px;
 
}
 
}
  
 
.hovereffect img {
 
.hovereffect img {
−
display:block;
+
  display:block;
−
position:relative;
+
  position:relative;
−
-webkit-transition:all .2s linear;
+
  -webkit-transition:all .2s linear;
−
transition:all .2s linear;
+
  transition:all .2s linear;
 
}
 
}
  
 
.hovereffect p {
 
.hovereffect p {
−
text-decoration:none;
+
  text-decoration:none;
−
display:inline-block;
+
  display:inline-block;
−
color:#fff;
+
  color:#fff;
−
background-color:transparent;
+
  background-color:transparent;
−
font-size: 14px !important;
+
  font-size: 14px !important;
−
opacity:0;
+
  opacity:0;
−
filter:alpha(opacity=0);
+
  filter:alpha(opacity=0);
−
-webkit-transition:all .3s ease-in-out;
+
  -webkit-transition:all .3s ease-in-out;
−
transition:all .3s ease-in-out;
+
  transition:all .3s ease-in-out;
−
margin:0 0 0;
+
  margin:0 0 0;
−
padding:7px 14px;
+
  padding:7px 14px;
 
}
 
}
  
Line 62: Line 62:
 
}*/
 
}*/
  
−
.hovereffect:hover img, .hovereffect:focus img, .hovereffect.hover_effect img {
+
.hovereffect:hover img,  
−
-ms-transform:scale(1.2);
+
.hovereffect:focus img {
−
-webkit-transform:scale(1.2);
+
  -ms-transform:scale(1.2);
−
transform:scale(1.2);
+
  -webkit-transform:scale(1.2);
 +
  transform:scale(1.2);
 
}
 
}
  
−
.hovereffect:hover .overlay, .hovereffect:focus .overlay, .hovereffect.hover_effect .overlay {
+
.hovereffect:hover .overlay,  
−
opacity:1;
+
.hovereffect:focus .overlay {
−
filter:alpha(opacity=100);
+
  opacity:1;
 +
  filter:alpha(opacity=100);
 
}
 
}
  
 
.hovereffect:hover h2,  
 
.hovereffect:hover h2,  
 
.hovereffect:focus h2,  
 
.hovereffect:focus h2,  
−
.hovereffect.hover_effect h2,
 
 
.hovereffect:hover p,  
 
.hovereffect:hover p,  
−
.hovereffect:focus p,
+
.hovereffect:focus p{
−
.hovereffect.hover_effect p {
+
  opacity:1;
−
opacity:1;
+
  filter:alpha(opacity=100);
−
filter:alpha(opacity=100);
+
  -ms-transform:translatey(0);
−
-ms-transform:translatey(0);
+
  -webkit-transform:translatey(0);
−
-webkit-transform:translatey(0);
+
  transform:translatey(0);
−
transform:translatey(0);
+
 
}
 
}
  
−
.hovereffect:hover p, .hovereffect:focus p, .hovereffect.hover_effect p {
+
.hovereffect:hover p,  
−
-webkit-transition-delay:.2s;
+
.hovereffect:focus p{
−
transition-delay:.2s;
+
  -webkit-transition-delay:.2s;
 +
  transition-delay:.2s;
 
}
 
}

Revision as of 18:27, 2 August 2016

.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;
 opacity:0;
 background-color:rgba(0,0,0,0.5);
 -webkit-transition:all .2s ease-in-out;
 transition:all .2s ease-in-out

}

.hovereffect h2 { 

 text-transform:uppercase;
 color:#fff;
 text-align:center;
 position:relative;
 font-size:20px;
 background:rgba(0,0,0,0.6);
 -webkit-transform:translatey(20vw);
 -ms-transform:translatey(20vw);
 transform:translatey(20vw);
 -webkit-transition:all .3s ease-in-out;
 transition:all .3s ease-in-out;
 padding:10px;

}

.hovereffect img { 

 display:block;
 position:relative;
 -webkit-transition:all .2s linear;
 transition:all .2s linear;

}

.hovereffect p { 

 text-decoration:none;
 display:inline-block;
 color:#fff;
 background-color:transparent;
 font-size: 14px !important;
 opacity:0;
 filter:alpha(opacity=0);
 -webkit-transition:all .3s ease-in-out;
 transition:all .3s ease-in-out;
 margin:0 0 0;
 padding:7px 14px;

}

/*.hovereffect p:hover { box-shadow:0 0 5px #fff; }*/

.hovereffect:hover img, .hovereffect:focus img { 

 -ms-transform:scale(1.2);
 -webkit-transform:scale(1.2);
 transform:scale(1.2);

}

.hovereffect:hover .overlay, .hovereffect:focus .overlay { 

 opacity:1;
 filter:alpha(opacity=100);

}

.hovereffect:hover h2, .hovereffect:focus h2, .hovereffect:hover p, .hovereffect:focus p{ 

 opacity:1;
 filter:alpha(opacity=100);
 -ms-transform:translatey(0);
 -webkit-transform:translatey(0);
 transform:translatey(0);

}

.hovereffect:hover p, .hovereffect:focus p{ 

 -webkit-transition-delay:.2s;
 transition-delay:.2s;

}