Qards Tips & Tricks

[qards]

Sticky menu visible on scroll

.menu.sticky,.menu.sticky.hide { opacity:1; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }

[qards]

Ken Burns Effect for Covers

.backgroud-wrapper { overflow:hidden; } .background-holder { -webkit-animation: ken-burns 140s cubic-bezier(.2,0,.8,1) infinite; -moz-animation: ken-burns 140s cubic-bezier(.2,0,.8,1) infinite; -o-animation: ken-burns 140s cubic-bezier(.2,0,.8,1) infinite; animation: ken-burns 140s cubic-bezier(.2,0,.8,1) infinite; } @-webkit-keyframes ken-burns { 50% { -webkit-transform:scale(1.5); transform:scale(1.5);} } @-moz-keyframes ken-burns { 50% { -moz-transform:scale(1.5); transform:scale(1.5);} } @-o-keyframes ken-burns { 50% { -o-transform:scale(1.5); transform:scale(1.5);} } @keyframes ken-burns { 50% { -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5);} }

[qards]

Image on hover effect

.image { overflow:hidden } .image img:hover { opacity: 0.95; -webkit-transform:scale(1.02); transform:scale(1.02); } .image.loaded img { -webkit-transition:0.75s cubic-bezier(.6,0,.4,1); transition:0.75s cubic-bezier(.6,0,.4,1); }

[qards]

Parallax Effect in Covers

@media screen and (min-width: 1025px) { .cover .background { background-attachment: fixed; position:fixed; } } Note: This effect will work only for cover as a first element

[qards]

How to change default height of a Cover element

If you want to make a default height of a Cover smaller that 100% of your screen you can add at Custom CSS: .cover { height:80vh }

[qards]

How to make a small icons in Grid with Custom CSS

.grid ul li .image { height: 64px; //size of your icons padding-bottom: 0; //dynamic size off background-size: contain; //do not stretch }

[qards]

Home to make a site like this

//back to back .grid .container { max-width: 100%; width: 100%; } //fix overlap .grid ul li a { overflow: hidden; } //transitions .grid ul li a .image { padding-bottom: 0; height: 100vh; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } //effect on hover .grid ul li a:hover .image { -webkit-transform: scale(1.025); -moz-transform: scale(1.025); -ms-transform: scale(1.025); -o-transform: scale(1.025); transform: scale(1.025); } //color of overlay .grid.seamless li .description-holder { background: rgba(18, 18, 18, 0.5); }

[qards]

How to make a Grid like this

//side to side .grid .container { max-width: 100%; width: 100%; } //size of an element .grid ul li { max-width: 100%; width: 100%; overflow: hidden; max-height: 33.3333vh; // 1/3 of a screen } //transition for hover .grid.image-1 li .image { padding-bottom: 0; height: 50vh; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } //effect on hover .grid.image-1 li a:hover .image { -webkit-transform: scale(1.025) translateY(-50px); -moz-transform: scale(1.025) translateY(-10px); -ms-transform: scale(1.025) translateY(-10px); -o-transform: scale(1.025) translateY(-10px); transform: scale(1.025) translateY(-10px); } //color of overlay .grid.seamless li .description-holder { background: rgba(18, 18, 18, 0.3); }

[qards]

How to remove shadow from Menu

.menu { box-shadow: none;}