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

Line 2: Line 2:
  
 
.hovereffect {
 
.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;
 +
  padding: 3em;
 +
  text-align: left;
 +
}
 +
 +
.hovereffect img {
 +
  display: block;
 +
  position: relative;
 +
  max-width: none;
 +
  width: calc(100% + 60px);
 +
  -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
 +
  transition: opacity 0.35s, transform 0.45s;
 +
  -webkit-transform: translate3d(-40px,0,0);
 +
  transform: translate3d(-40px,0,0);
 +
}
 +
 +
.hovereffect h2 {
 +
  text-transform: uppercase;
 +
  color: #fff;
 +
  position: relative;
 +
  font-size: 17px;
 +
  background-color: rgba(0,0,0,0.6);
 +
  padding: 15% 0 10px 0;
 +
  text-align: center; /*align header to center of picture*/
 +
}
 +
 +
.hovereffect .overlay:before {
 +
  position: absolute;
 +
  top: 20px;
 +
  right: 20px;
 +
  bottom: 20px;
 +
  left: 20px;
 +
  border: 1px solid #fff;
 +
  content: '';
 +
  opacity: 0; /*make the object completely transparant*/
 +
  background-color: rgba(0,0,0,0.5);
 +
  filter: alpha(opacity=0);
 +
  -webkit-transition:all .2s ease-in-out;
 +
  transition:all .2s ease-in-out
 +
  /*-webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
 +
  transition: opacity 0.35s, transform 0.45s;
 +
  -webkit-transform: translate3d(-20px,0,0);
 +
  transform: translate3d(-20px,0,0);*/
 +
}
 +
 +
.hovereffect a, .hovereffect p {
 +
  text-decoration: none;
 +
  display: inline-block;
 +
  color: #FFF;
 +
  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:hover img, .hovereffect:focus img {
 +
  -ms-transform:scale(1.2);
 +
  -webkit-transform:scale(1.2);
 +
  transform:scale(1.2);
 +
/*  opacity: 0.6;
 +
  filter: alpha(opacity=60);
 +
  -webkit-transform: translate3d(0,0,0);
 +
  transform: translate3d(0,0,0);*/
 +
}
 +
 +
.hovereffect:hover .overlay:before,
 +
.hovereffect:hover h2,
 +
.hovereffect:hover a,
 +
.hovereffect:hover p,
 +
.hovereffect:focus .overlay:before,
 +
.hovereffect:focus h2,
 +
.hovereffect:focus a,
 +
.hovereffect:focus p {
 +
  opacity: 1;
 +
  filter: alpha(opacity=100);
 +
  -ms-transform:translatey(0);
 +
  -webkit-transform:translatey(0);
 +
  transform:translatey(0);
 +
/*  -webkit-transform: translate3d(0,0,0);
 +
  transform: translate3d(0,0,0);*/
 +
}
 +
 +
.hovereffect:hover p,
 +
.hovereffect:focus p{
 +
  -webkit-transition-delay:.2s;
 +
  transition-delay:.2s;
 +
}
 +
 +
 +
 +
/*.hovereffect {
 
   width:100%;
 
   width:100%;
 
   height:100%;
 
   height:100%;
Line 65: Line 174:
 
box-shadow:0 0 5px #fff;
 
box-shadow:0 0 5px #fff;
 
}*/
 
}*/
−
 
+
/*
 
.hovereffect:hover img,  
 
.hovereffect:hover img,  
 
.hovereffect:focus img {
 
.hovereffect:focus img {
Line 95: Line 204:
 
   transition-delay:.2s;
 
   transition-delay:.2s;
 
}
 
}
 +
*/

Revision as of 19:25, 2 August 2016

/*Sorcecode: https://miketricking.github.io/dist/*/

.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;
 padding: 3em;
 text-align: left;

}

.hovereffect img { 

 display: block;
 position: relative;
 max-width: none;
 width: calc(100% + 60px);
 -webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
 transition: opacity 0.35s, transform 0.45s;
 -webkit-transform: translate3d(-40px,0,0);
 transform: translate3d(-40px,0,0);

}

.hovereffect h2 { 

 text-transform: uppercase;
 color: #fff;
 position: relative;
 font-size: 17px;
 background-color: rgba(0,0,0,0.6);
 padding: 15% 0 10px 0;
 text-align: center; /*align header to center of picture*/

}

.hovereffect .overlay:before { 

 position: absolute;
 top: 20px;
 right: 20px;
 bottom: 20px;
 left: 20px;
 border: 1px solid #fff;
 content: ;
 opacity: 0; /*make the object completely transparant*/
 background-color: rgba(0,0,0,0.5); 
 filter: alpha(opacity=0);
 -webkit-transition:all .2s ease-in-out;
 transition:all .2s ease-in-out
 /*-webkit-transition: opacity 0.35s, -webkit-transform 0.45s;
 transition: opacity 0.35s, transform 0.45s;
 -webkit-transform: translate3d(-20px,0,0);
 transform: translate3d(-20px,0,0);*/

}

.hovereffect a, .hovereffect p { 

 text-decoration: none;
 display: inline-block;
 color: #FFF;
 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:hover img, .hovereffect:focus img { 

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

/* opacity: 0.6; 

 filter: alpha(opacity=60);
 -webkit-transform: translate3d(0,0,0);
 transform: translate3d(0,0,0);*/

}

.hovereffect:hover .overlay:before, .hovereffect:hover h2, .hovereffect:hover a, .hovereffect:hover p, .hovereffect:focus .overlay:before, .hovereffect:focus h2, .hovereffect:focus a, .hovereffect:focus p { 

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

/* -webkit-transform: translate3d(0,0,0); 

 transform: translate3d(0,0,0);*/

}

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

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

}


/*.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;
 width: 100%
 top: 50%
 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;

}

  • /