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

 
(32 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
/*Sorcecode: https://miketricking.github.io/dist/*/
 +
 +
 +
/*This one has a permanent header, when hovering the paragraf appear along with an overlay on the picture to make it darker*/
 
.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;
+
  /*padding: 3em;*/
−
background-color:rgba(0,0,0,0.5);
+
  text-align: left;
−
-webkit-transition:all .2s ease-in-out;
+
}
−
transition:all .2s ease-in-out
+
 
 +
.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 {
 
.hovereffect h2 {
−
text-transform:uppercase;
+
  text-transform: uppercase;
−
color:#fff;
+
  text-align: center; /*align header to center of picture*/
−
text-align:center;
+
  width: 100%;
−
position:relative;
+
  color: #fff;
−
font-size:20px;
+
  position: relative;
−
background:rgba(0,0,0,0.6);
+
  font-size: 20px;
−
-webkit-transform:translatey(20wv);
+
  background-color: rgba(0,0,0,0.6);
−
-ms-transform:translatey(20wv);
+
  padding: 10px 0 10px 0;
−
transform:translatey(20wv);
+
  opacity: 1;
−
-webkit-transition:all .3s ease-in-out;
+
}
−
transition:all .3s ease-in-out;
+
 
−
padding:10px;
+
.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;
 +
  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:focus .overlay:before,
 +
.hovereffect:focus a,
 +
.hovereffect:focus p {
 +
  opacity:1;
 +
  filter:alpha(opacity=100);
 +
  -ms-transform:translatey(0);
 +
  -webkit-transform:translatey(0);
 +
  transform:translatey(0);
 +
}
 +
 
 +
/*.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%;
 +
  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 {
 
.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 61: Line 189:
 
box-shadow:0 0 5px #fff;
 
box-shadow:0 0 5px #fff;
 
}*/
 
}*/
−
 
+
/*
−
.hovereffect:hover img, .hovereffect:focus 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 .overlay,  
−
opacity:1;
+
.hovereffect:focus .overlay {
−
filter:alpha(opacity=100);
+
  opacity:1;
 +
  filter:alpha(opacity=100);
 
}
 
}
  
−
.hovereffect:hover h2, .hovereffect:focus h2, .hovereffect:hover p, .hovereffect:focus p {
+
.hovereffect:hover h2,  
−
opacity:1;
+
.hovereffect:focus h2,  
−
filter:alpha(opacity=100);
+
.hovereffect:hover p,  
−
-ms-transform:translatey(0);
+
.hovereffect:focus p{
−
-webkit-transform:translatey(0);
+
  opacity:1;
−
transform:translatey(0);
+
  filter:alpha(opacity=100);
 +
  -ms-transform:translatey(0);
 +
  -webkit-transform:translatey(0);
 +
  transform:translatey(0);
 
}
 
}
  
−
.hovereffect:hover p, .hovereffect:focus p {
+
.hovereffect:hover p,  
−
-webkit-transition-delay:.2s;
+
.hovereffect:focus p{
−
transition-delay:.2s;
+
  -webkit-transition-delay:.2s;
 +
  transition-delay:.2s;
 
}
 
}
 +
*/

Latest revision as of 08:38, 3 August 2016

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


/*This one has a permanent header, when hovering the paragraf appear along with an overlay on the picture to make it darker*/ .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: relative;
 font-size: 20px;
 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;
 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:focus .overlay:before, .hovereffect:focus a, .hovereffect:focus p { 

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

}

/*.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%;
 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;

}

  • /