Line 39: | Line 39: | ||
font-size: 17px; | font-size: 17px; | ||
background-color: rgba(0,0,0,0.6); | background-color: rgba(0,0,0,0.6); | ||
− | padding: | + | padding: 10px 0 10px 0; |
text-align: center; /*align header to center of picture*/ | text-align: center; /*align header to center of picture*/ | ||
} | } | ||
Line 45: | Line 45: | ||
.hovereffect .overlay:before { | .hovereffect .overlay:before { | ||
position: absolute; | position: absolute; | ||
− | top: 20px; | + | height: 100%; |
+ | width: 100%; | ||
+ | /*top: 20px; | ||
right: 20px; | right: 20px; | ||
bottom: 20px; | bottom: 20px; | ||
− | left: 20px; | + | left: 20px; removed gives an area that do not get background upon hovering*/ |
/*border: 1px solid #fff;*/ | /*border: 1px solid #fff;*/ | ||
content: ''; | content: ''; |
Revision as of 19:38, 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; color: #fff; position: relative; font-size: 17px; background-color: rgba(0,0,0,0.6); padding: 10px 0 10px 0; text-align: center; /*align header to center of picture*/
}
.hovereffect .overlay:before {
position: absolute; height: 100%; width: 100%; /*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); -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; 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 h2, */ .hovereffect:hover a, .hovereffect:hover p, .hovereffect:focus .overlay:before, /*.hovereffect:focus h2, */ .hovereffect:focus a, .hovereffect:focus p {
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 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;
}
- /