JADE
.container
.box-1
h1 hover me
.share-buttons
a.btn.facebook(href='#')
i.fa.fa-facebook
|
a.btn.twitter(href='#')
i.fa.fa-twitter
|
a.btn.google(href='#')
i.fa.fa-google
|
.box-2
.layer
.inner
h1 hover me
|
a.btn.facebook(href='#')
i.fa.fa-facebook
|
a.btn.twitter(href='#')
i.fa.fa-twitter
|
a.btn.google(href='#')
i.fa.fa-google
.box-3
h1 hover me
.share-buttons
a.btn.facebook(href='#')
i.fa.fa-facebook
|
a.btn.twitter(href='#')
i.fa.fa-twitter
|
a.btn.google(href='#')
i.fa.fa-google
|
.layer
SCSS
html, body {
width: 100%;
height: 100%;
margin: 0;
font-family: 'Bungee', cursive;
background: #7474BF;
background: linear-gradient(to left, #7474BF , #348AC7);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
margin: 0;
text-transform: uppercase;
color: #fff;
}
div[class*=box] {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
margin-bottom: 60px;
box-shadow: 6px 5px 30px -4px rgba(0,0,0,0.55);
}
.btn {
width: 50px;
height: 50px;
background: #333;
text-align: center;
padding-top: 8px;
box-sizing: border-box;
&.facebook {
background-color: #3b5998;
}
&.twitter {
background-color: #55acee;
}
&.google {
background-color: #dd4b39;
}
.fa {
font-size: 35px;
color: #fff;
}
}
/*
=========================
BOX ONE
=========================
*/
.box-1 {
background-color: #67AAF9;
margin-top: 60px;
display: flex;
justify-content: center;
align-items: center;
.share-buttons {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid transparent;
width: 0;
height: 0;
z-index: 10;
transition: all 0.4s 0s,
border 0.4s 0.6s,
height 0.4s 0.4s,
margin 0.4s 0.4s;
}
&:hover .share-buttons {
height: 200px;
width: 400px;
margin-top: -100px;
border-color: #dbdbdb;
background-color: rgba(196, 224, 249, 1);
transform: translateX(-200px);
transition: all 0.4s 0.4s,
border 0.4s 0s,
height 0.4s 0s,
margin 0.4s 0s;
}
.btn {
opacity: 0;
}
&:hover .btn {
opacity: 1;
transition: 0.4s;
transition-delay: 0.7s;
}
}
/*
=========================
BOX TWO
=========================
*/
.box-2 {
background: rgba(196, 224, 249, 1);
.layer {
position: absolute;
top: 0;
left: 0;
height: 300px;
transition: 0.4s 0.8s;
}
&:hover .layer {
transition: 0.4s 0s;
transform: translateY(250px);
}
.layer .inner {
background-color: #B95F89;
width: 600px;
height: 400px;
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
position: absolute;
top: 10px;
opacity: 0;
z-index: 2;
}
&:hover .btn {
opacity: 1;
transform: translateY(-150px);
}
.facebook {
left: 20%;
transition: 0.4s 0.6s;
}
.twitter {
left: 45%;
transition: 0.4s 0.4s;
}
.google {
left: 70%;
transition: 0.4s 0.2s;
}
}
/*
=========================
BOX THREE
=========================
*/
.box-3 {
background-color: #2EC0F9;
transition: 1s;
display: flex;
justify-content: center;
align-items: center;
&:hover .share-buttons {
opacity: 1;
padding: 0 18%;
}
.share-buttons {
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
opacity: 0;
transition: 0.4s;
z-index: 10;
}
.btn {
display: inline-block;
margin: 175px 40px;
}
}
1 Response
I'm not familiar with Jade (though I may have to become familiar with it now). Is it a node module/program that needs to be installed via the command line and then compiled to HTML (...similar to Compass and Sass) via a command? ...just curious..Thanks!