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

Line 1: Line 1:
−
/*Source: http://tympanus.net/Development/HoverEffectIdeas/*/
+
.hovereffect {
−
/*@font-face {
+
width:100%;
−
font-weight: normal;
+
height:100%;
−
font-style: normal;
+
float:left;
−
font-family: 'feathericons';
+
overflow:hidden;
−
src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
+
position:relative;
−
src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
+
text-align:center;
−
url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
+
cursor:default;
−
url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
+
−
url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
+
−
}*/
+
−
 
+
−
.grid {
+
−
position: relative;
+
−
margin: 0 auto;
+
−
padding: 1em 0 4em;
+
−
max-width: 1000px;
+
−
list-style: none;
+
−
text-align: center;
+
 
}
 
}
  
−
/* 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;
+
opacity:0;
−
max-height: 600px;
+
background-color:rgba(0,0,0,0.5);
−
width: 100%;
+
-webkit-transition:all .4s ease-in-out;
−
background: #3085a3;
+
transition:all .4s ease-in-out
−
text-align: center;
+
−
cursor: pointer;
+
 
}
 
}
  
−
.grid figure img {
+
.hovereffect img {
−
position: relative;
+
display:block;
−
display: block;
+
position:relative;
−
min-height: 100%;
+
-webkit-transition:all .4s linear;
−
max-width: 100%;
+
transition:all .4s linear;
−
opacity: 0.8;
+
 
}
 
}
  
−
.grid figure figcaption {
+
.hovereffect h2 {
−
padding: 2em;
+
text-transform:uppercase;
−
color: #fff;
+
color:#fff;
−
text-transform: uppercase;
+
text-align:center;
−
font-size: 1.25em;
+
position:relative;
−
-webkit-backface-visibility: hidden;
+
font-size:20px;
−
backface-visibility: hidden;
+
background:rgba(0,0,0,0.6);
−
}
+
-webkit-transform:translatey(-100px);
 +
-ms-transform:translatey(-100px);
 +
transform:translatey(-100px);
 +
-webkit-transition:all .2s ease-in-out;
 +
transition:all .2s ease-in-out;
 +
padding:10px;
  
−
.grid figure figcaption::before,
 
−
.grid figure figcaption::after {
 
−
pointer-events: none;
 
 
}
 
}
  
−
.grid figure figcaption,
+
.hovereffect p {
−
.grid figure figcaption > a {
+
text-decoration:none;
−
position: absolute;
+
display:inline-block;
−
top: 0;
+
color:#fff;
−
left: 0;
+
background-color:transparent;
−
width: 100%;
+
font-size: 14px !important;
−
height: 100%;
+
opacity:0;
 +
filter:alpha(opacity=0);
 +
-webkit-transition:all .2s ease-in-out;
 +
transition:all .2s ease-in-out;
 +
margin:0 0 0;
 +
padding:7px 14px;
 
}
 
}
  
−
/* Anchor will cover the whole item by default */
+
/*.hovereffect p:hover {
−
/* For some effects it will show as a button */
+
box-shadow:0 0 5px #fff;
−
.grid figure figcaption > a {
+
}*/
−
z-index: 1000;
+
−
text-indent: 200%;
+
−
white-space: nowrap;
+
−
font-size: 0;
+
−
opacity: 0;
+
−
}
+
−
 
+
−
.grid figure h2 {
+
−
word-spacing: -0.15em;
+
−
font-weight: 300;
+
−
}
+
−
 
+
−
.grid figure h2 span {
+
−
font-weight: 800;
+
−
}
+
−
 
+
−
.grid figure h2,
+
−
.grid figure p {
+
−
margin: 0;
+
−
}
+
−
 
+
−
.grid figure p {
+
−
letter-spacing: 1px;
+
−
font-size: 68.5%;
+
−
}
+
−
 
+
−
 
+
−
/*---------------*/
+
−
/***** Sadie *****/
+
−
/*---------------*/
+
−
 
+
−
figure.effect-sadie figcaption::before {
+
−
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 {
+
−
position: absolute;
+
−
top: 50%;
+
−
left: 0;
+
−
width: 100%;
+
−
color: #fff;
+
−
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
+
−
transition: transform 0.35s, color 0.35s;
+
−
-webkit-transform: translate3d(0,-200px,0);
+
−
transform: translate3d(0,-200px,0);
+
−
}
+
  
−
figure.effect-sadie figcaption::before,
+
.hovereffect:hover img {
−
figure.effect-sadie p {
+
-ms-transform:scale(1.2);
−
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+
-webkit-transform:scale(1.2);
−
transition: opacity 0.35s, transform 0.35s;
+
transform:scale(1.2);
 
}
 
}
  
−
figure.effect-sadie p {
+
.hovereffect:hover .overlay {
−
position: absolute;
+
opacity:1;
−
bottom: 0;
+
filter:alpha(opacity=100);
−
left: 0;
+
−
padding: 2em;
+
−
width: 100%;
+
−
opacity: 0;
+
−
-webkit-transform: translate3d(200px,0);
+
−
transform: translate3d(200px,0);
+
 
}
 
}
  
−
figure.effect-sadie:hover h2 {
+
.hovereffect:hover h2,.hovereffect:hover p {
−
color: #fff;
+
opacity:1;
−
-webkit-transform: translate3d(0,-200px,0) translate3d(0,-200px,0);
+
filter:alpha(opacity=100);
−
transform: translate3d(0,-200px,0) translate3d(0,-200px,0);
+
-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 {
+
-webkit-transition-delay:.2s;
−
opacity: 1;
+
transition-delay:.2s;
−
-webkit-transform: translate3d(0,0,0);
+
−
transform: translate3d(0,0,0);
+
 
}
 
}

Revision as of 13:03, 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 .4s ease-in-out; transition:all .4s ease-in-out }

.hovereffect img { display:block; position:relative; -webkit-transition:all .4s linear; transition:all .4s linear; }

.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(-100px); -ms-transform:translatey(-100px); transform:translatey(-100px); -webkit-transition:all .2s ease-in-out; transition:all .2s ease-in-out; padding:10px;

}

.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 .2s ease-in-out; transition:all .2s ease-in-out; margin:0 0 0; padding:7px 14px; }

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

.hovereffect:hover img { -ms-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2); }

.hovereffect:hover .overlay { opacity:1; filter:alpha(opacity=100); }

.hovereffect:hover h2,.hovereffect:hover p { opacity:1; filter:alpha(opacity=100); -ms-transform:translatey(0); -webkit-transform:translatey(0); transform:translatey(0); }

.hovereffect:hover p { -webkit-transition-delay:.2s; transition-delay:.2s; }