It might be a dumb question, but I came across this awesome CodePen that I wanted to configure and use. I ran a quick demo on my own server, but that didn't work. Then I realized that next to CodePen it said SCSS, which I googled. I understand, but I don't know how to make this specific code work.
html:
<body>
<div id="paper"> </div>
<div class="wrap">
<a class="two" href="http://db.tt/vkXgwK2P">
<img class="round" src="http://db.tt/vkXgwK2P" alt="">
</a>
<a class="three" href="http://db.tt/Lrtnc768">
<img class="round" src="http://db.tt/Lrtnc768" alt="">
</a>
<a class="one" href="http://db.tt/CSVy5HNR">
<img class="round" src="http://db.tt/CSVy5HNR" alt="">
</a>
<figure>
<img src="http://db.tt/FveX1nYo" alt="">
</figure>
</div>
SCSS:
body {
margin: 0;
}
#paper {
height: 120px;
margin: 0;
background: #303535;
}
.wrap {
margin: 0 auto;
width: 180px;
height: 180px;
border-radius: 50%;
box-shadow: 0 0 0 10px white;
position: relative;
top: -80px;
background: #fff;
a {
margin: 0;
position: absolute;
.round {
border-radius: 50%;
width: 180px;
height: 180px;
box-shadow: 0 0 0 10px white;
}
}
figure img {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
position: absolute;
top: 200px;
left: 77px;
}
.two {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
opacity: 0.8;
top: 0;
}
.three {
margin: 0;
-webkit-transition: top 0.4s ease-out;
-moz-transition: top 0.4s ease-out;
transition: top 0.4s ease-out;
opacity: 0.8;
top: 0;
}
&:hover .one {
opacity: 0.8;
}
& a.one:hover {
opacity: 1;
z-index: 2;
}
:hover .two {
top: 300px;
}
& a.two:hover {
opacity: 1;
z-index: 2;
}
&:hover .three {
top: 150px;
}
& a.three:hover {
opacity: 1;
z-index: 2;
}
&:hover figure img {
top: 500px;
}
}
There is also an example of what I'm trying to achieve in CodePen: http://codepen.io/CoffeeCupDrummer/pen/FqChm
I thought maybe the problem is the syntax of the links, so I changed it to look like this, but that didn't work either. I tried style.css, then switched to style.scss in the hope of fixing it.
<link rel="stylesheet" href="stylesheet/style.scss">
, , SCSS , CodePen?