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

Revision as of 21:11, 2 August 2016 (view source) Saphi (Talk | contribs) ← Older edit		Revision as of 21:14, 2 August 2016 (view source) Saphi (Talk | contribs) Newer edit →
Line 43:		Line 43:
	padding: 10px 0 10px 0;		padding: 10px 0 10px 0;
	opacity: 1;		opacity: 1;
−
	}		}
Line 69:		Line 68:
	.hovereffect a, .hovereffect p {		.hovereffect a, .hovereffect p {
	text-decoration: none;		text-decoration: none;
−	position: absolute;
−	top: 55%;
	display: inline-block;		display: inline-block;
	color: #FFF;		color: #FFF;
Line 99:		Line 96:
	/*  -webkit-transform: translate3d(0,0,0);		/*  -webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);*/		transform: translate3d(0,0,0);*/
−
	}		}
−
	.hovereffect:hover a,		.hovereffect:hover a,

---

Revision as of 21:14, 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;
 text-align: center; /*align header to center of picture*/
 width: 100%;
 color: #fff;
 position: relative;
 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;
 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:focus .overlay:before, {

 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 a, .hovereffect:hover p, .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;

}

• /