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

 
(78 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
/*@font-face {
+
/*Sorcecode: https://miketricking.github.io/dist/*/
−
font-weight: normal;
+
 
−
font-style: normal;
+
−
font-family: 'feathericons';
+
−
src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
+
−
src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
+
−
url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
+
−
url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
+
−
url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
+
−
}*/
+
  
−
.grid {
+
/*This one has a permanent header, when hovering the paragraf appear along with an overlay on the picture to make it darker*/
−
position: relative;
+
.hovereffect {
−
margin: 0 auto;
+
  width: 100%;
−
padding: 1em 0 4em;
+
  height: 100%;
−
max-width: 1000px;
+
  float: left;
−
list-style: none;
+
  overflow: hidden;
−
text-align: center;
+
  position: relative;
 +
  text-align: center;
 +
  cursor: default;
 
}
 
}
  
−
/* Common style */
+
.hovereffect .overlay {
−
.grid figure {
+
  width: 100%;
−
position: relative;
+
  height: 100%;
−
float: left;
+
  position: absolute;
−
overflow: hidden;
+
  overflow: hidden;
−
margin: 10px 1%;
+
  top: 0;
−
min-width: 400px;
+
  left: 0;
−
max-width: 600px;
+
  /*padding: 3em;*/
−
max-height: 600px;
+
  text-align: left;
−
width: 100%;
+
−
background: #3085a3;
+
−
text-align: center;
+
−
cursor: pointer;
+
 
}
 
}
  
−
.grid figure img {
+
.hovereffect img {
−
position: relative;
+
  display: block;
−
display: block;
+
  position: relative;
−
min-height: 100%;
+
  max-width: none;
−
max-width: 100%;
+
  width: calc(100% + 60px);
−
opacity: 0.8;
+
  -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);
 
}
 
}
  
−
.grid figure figcaption {
+
.hovereffect h2 {
−
padding: 2em;
+
  text-transform: uppercase;
−
color: #fff;
+
  text-align: center; /*align header to center of picture*/
−
text-transform: uppercase;
+
  width: 100%;
−
font-size: 1.25em;
+
  color: #fff;
−
-webkit-backface-visibility: hidden;
+
  position: relative;
−
backface-visibility: hidden;
+
  font-size: 20px;
 +
  background-color: rgba(0,0,0,0.6);
 +
  padding: 10px 0 10px 0;
 +
  opacity: 1;  
 
}
 
}
  
−
.grid figure figcaption::before,
+
.hovereffect .overlay:before {
−
.grid figure figcaption::after {
+
  width: 100%;
−
pointer-events: none;
+
  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);*/
 
}
 
}
  
−
.grid figure figcaption,
+
.hovereffect a, .hovereffect p {
−
.grid figure figcaption > a {
+
  text-decoration: none;
−
position: absolute;
+
  display: inline-block;
−
top: 0;
+
  color: #FFF;
−
left: 0;
+
  font-size: 14px !important;
−
width: 100%;
+
  opacity: 0;
−
height: 100%;
+
  filter: alpha(opacity=0);
 +
  margin:0 0 0;
 +
  padding:7px 14px;
 
}
 
}
  
−
/* Anchor will cover the whole item by default */
+
.hovereffect:hover img, .hovereffect:focus img {
−
/* For some effects it will show as a button */
+
  -ms-transform:scale(1.2);
−
.grid figure figcaption > a {
+
  -webkit-transform:scale(1.2);
−
z-index: 1000;
+
  transform:scale(1.2);
−
text-indent: 200%;
+
/*  opacity: 0.6;
−
white-space: nowrap;
+
  filter: alpha(opacity=60);
−
font-size: 0;
+
  -webkit-transform: translate3d(0,0,0);
−
opacity: 0;
+
  transform: translate3d(0,0,0);*/
 
}
 
}
  
−
.grid figure h2 {
+
.hovereffect:hover .overlay:before,
−
word-spacing: -0.15em;
+
.hovereffect:hover a,
−
font-weight: 300;
+
.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);
 
}
 
}
  
−
.grid figure h2 span {
+
/*.hovereffect:hover h2,
−
font-weight: 800;
+
.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;
 
}
 
}
  
−
.grid figure h2,
+
 
−
.grid figure p {
+
 
−
margin: 0;
+
/*.hovereffect {
 +
  width:100%;
 +
  height:100%;
 +
  float:left;
 +
  overflow:hidden;
 +
  position:relative;
 +
  text-align:center;
 +
  cursor:default;
 
}
 
}
  
−
.grid figure p {
+
.hovereffect .overlay {
−
letter-spacing: 1px;
+
  width:100%;
−
font-size: 68.5%;
+
  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 {
−
/***** Sadie *****/
+
  display:block;
−
/*---------------*/
+
  position:relative;
−
 
+
  -webkit-transition:all .2s linear;
−
figure.effect-sadie figcaption::before {
+
  transition:all .2s linear;
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
width: 100%;
+
−
height: 100%;
+
−
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
+
−
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);*/
+
−
        background-color:rgba(0,0,0,0.5);
+
−
content: '';
+
−
opacity: 0;
+
−
-webkit-transform: translate3d(0,-200px,0);
+
−
transform: translate3d(0,-200px,0);
+
 
}
 
}
  
−
figure.effect-sadie h2 {
+
.hovereffect p {
−
position: absolute;
+
  text-decoration:none;
−
top: 50%;
+
  display:inline-block;
−
left: 0;
+
  color:#fff;
−
width: 100%;
+
  background-color:transparent;
−
color: #fff;
+
  font-size: 14px !important;
−
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
+
  opacity:0;
−
transition: transform 0.35s, color 0.35s;
+
  filter:alpha(opacity=0);
−
-webkit-transform: translate3d(0,-50%,0);
+
  -webkit-transition:all .3s ease-in-out;
−
transform: translate3d(0,-50%,0);
+
  transition:all .3s ease-in-out;
 +
  margin:0 0 0;
 +
  padding:7px 14px;
 
}
 
}
  
−
figure.effect-sadie figcaption::before,
+
/*.hovereffect p:hover {
−
figure.effect-sadie p {
+
box-shadow:0 0 5px #fff;
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
}*/
−
transition: opacity 0.35s, transform 0.35s;
+
/*
 +
.hovereffect:hover img,  
 +
.hovereffect:focus img {
 +
  -ms-transform:scale(1.2);
 +
  -webkit-transform:scale(1.2);
 +
  transform:scale(1.2);
 
}
 
}
  
−
figure.effect-sadie p {
+
.hovereffect:hover .overlay,
−
position: absolute;
+
.hovereffect:focus .overlay {
−
bottom: 0;
+
  opacity:1;
−
left: 0;
+
  filter:alpha(opacity=100);
−
padding: 2em;
+
−
width: 100%;
+
−
opacity: 0;
+
−
-webkit-transform: translate3d(0,10px,0);
+
−
transform: translate3d(0,10px,0);
+
 
}
 
}
  
−
figure.effect-sadie:hover h2 {
+
.hovereffect:hover h2,
−
color: #fff;
+
.hovereffect:focus h2,
−
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
+
.hovereffect:hover p,
−
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
+
.hovereffect:focus p{
 +
  opacity:1;
 +
  filter:alpha(opacity=100);
 +
  -ms-transform:translatey(0);
 +
  -webkit-transform:translatey(0);
 +
  transform:translatey(0);
 
}
 
}
  
−
figure.effect-sadie:hover figcaption::before ,
+
.hovereffect:hover p,  
−
figure.effect-sadie:hover p {
+
.hovereffect:focus p{
−
opacity: 1;
+
  -webkit-transition-delay:.2s;
−
-webkit-transform: translate3d(0,0,0);
+
  transition-delay:.2s;
−
transform: translate3d(0,0,0);
+
 
}
 
}
 +
*/

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;

}

  • /