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

Line 1: Line 1:
 
/*Sorcecode: https://miketricking.github.io/dist/*/
 
/*Sorcecode: https://miketricking.github.io/dist/*/
−
 
−
/*This one position the header in the middle and slide it up*/
 
−
/*problem with p and a that do not appear, maybe look at sourcecode of the ones with a box below that appear*/
 
−
/*another problem is that the positioning of the header when sliding up cannot be relative to the pictures size, as far as known, need investigation further*/
 
−
 
 
.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;
 
−
  text-align: center; /*align header to center of picture*/
 
−
  width: 100%;
 
−
  color: #fff;
 
−
  position: absolute;
 
−
  top: 45%;
 
−
  font-size: 17px;
 
−
  background-color: rgba(0,0,0,0.6);
 
−
  padding: 10px 0 10px 0;
 
−
  opacity: 1;
 
−
 
 
−
}
 
−
 
−
.hovereffect .overlay:before {
 
−
  width: 100%;
 
−
  height: 100%;
 
−
  position: absolute;
 
−
  /*top: 20px;
 
−
  right: 20px;
 
−
  bottom: 20px;
 
−
  left: 20px; removed gives an area that do not get background upon hovering*/
 
−
  /*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;
 
−
  position: absolute;
 
−
  top: 55%;
 
−
  display: inline-block;
 
−
  color: #FFF;
 
−
  font-size: 14px !important;
 
−
  opacity: 0;
 
−
  filter: alpha(opacity=0);
 
−
  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 a,
 
−
.hovereffect:hover p,
 
−
/*.hovereffect:hover h2:before,*/
 
−
.hovereffect:focus .overlay:before,
 
−
.hovereffect:focus a,
 
−
.hovereffect:focus p,
 
−
/*.hovereffect:focus h2:before*/ {
 
−
  opacity:1;
 
−
  filter:alpha(opacity=100);
 
−
  -ms-transform:translatey(0);
 
−
  -webkit-transform:translatey(0);
 
−
  transform:translatey(0);
 
−
  /*opacity: 1;
 
−
  filter: alpha(opacity=100);
 
−
  -webkit-transform:translateY(-18vw);
 
−
  -moz-transform:translateY(-18vw);
 
−
  -ms-transform:translateY(-18vw);
 
−
  -o-transform:translateY(-18vw);
 
−
  transform:translateY(-18vw);
 
−
  -webkit-transition: all .3s ease-in-out;
 
−
  -moz-transition: all .3s ease-in-out;
 
−
  -ms-transition: all .3s ease-in-out;
 
−
  -o-transition: all .3s ease-in-out;
 
−
  transition: all .3s ease-in-out;*/
 
−
}
 
−
 
−
.hovereffect:hover h2,
 
−
.hovereffect:focus h2 {
 
−
    -webkit-transform:translateY(-18vw);
 
−
    -moz-transform:translateY(-18vw);
 
−
    -ms-transform:translateY(-18vw);
 
−
    -o-transform:translateY(-18vw);
 
−
    transform:translateY(-18vw);
 
−
    -webkit-transition: all .3s ease-in-out;
 
−
    -moz-transition: all .3s ease-in-out;
 
−
    -ms-transition: all .3s ease-in-out;
 
−
    -o-transition: all .3s ease-in-out;
 
−
    transition: all .3s ease-in-out;   
 
−
}
 
−
 
−
 
−
.hovereffect:hover p,
 
−
.hovereffect:focus p{
 
−
  -webkit-transition-delay:.2s;
 
−
  transition-delay:.2s;
 
−
}
 
−
 
−
 
−
 
−
/*.hovereffect {
 
 
   width:100%;
 
   width:100%;
 
   height:100%;
 
   height:100%;
Line 171: Line 25:
 
.hovereffect h2 {
 
.hovereffect h2 {
 
   text-transform:uppercase;
 
   text-transform:uppercase;
−
  width: 100%
 
−
  top: 50%
 
 
   color:#fff;
 
   color:#fff;
 
   text-align:center;
 
   text-align:center;
Line 210: Line 62:
 
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 240: Line 92:
 
   transition-delay:.2s;
 
   transition-delay:.2s;
 
}
 
}
−
*/
 

Revision as of 21:22, 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;
 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;

}