(114 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; |
− | + | /*padding: 3em;*/ | |
− | + | text-align: left; | |
− | + | ||
− | + | ||
} | } | ||
.hovereffect img { | .hovereffect img { | ||
− | display:block; | + | display: block; |
− | position:relative; | + | position: relative; |
− | -webkit-transition: | + | max-width: none; |
− | transition: | + | 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; |
− | + | text-align: center; /*align header to center of picture*/ | |
− | text-align:center; | + | width: 100%; |
− | position:relative; | + | color: #fff; |
− | font-size: | + | position: relative; |
− | background:rgba(0,0,0,0.6); | + | 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 p { | + | .hovereffect a, .hovereffect p { |
− | text- | + | text-decoration: none; |
− | + | display: inline-block; | |
− | + | color: #FFF; | |
− | + | font-size: 14px !important; | |
− | font-size:14px; | + | opacity: 0; |
− | + | filter: alpha(opacity=0); | |
− | + | margin:0 0 0; | |
− | + | padding:7px 14px; | |
− | + | ||
− | + | ||
− | + | ||
− | padding: | + | |
− | + | ||
} | } | ||
− | .hovereffect | + | .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); | |
− | opacity:0; | + | -webkit-transform: translate3d(0,0,0); |
− | filter:alpha(opacity= | + | transform: translate3d(0,0,0);*/ |
− | -webkit- | + | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .hovereffect a. | + | .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 img { | + | /*.hovereffect:hover h2, |
− | -ms-transform:scale(1.2); | + | .hovereffect:focus h2 { |
− | -webkit-transform:scale(1.2); | + | -webkit-transform:translateY(-18vw); |
− | transform:scale(1.2); | + | -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:hover .overlay, |
− | opacity:1; | + | .hovereffect:focus .overlay { |
− | filter:alpha(opacity=100); | + | opacity:1; |
+ | filter:alpha(opacity=100); | ||
} | } | ||
− | .hovereffect:hover h2,.hovereffect: | + | .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 | + | .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;
}
- /