Skip to content

Instantly share code, notes, and snippets.

@smiller4

smiller4/Project-Selector.markdown

Forked from anonymous/Project-Selector.markdown
Created May 4, 2014 01:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save smiller4/f780c0fda9f8462d7459 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save smiller4/f780c0fda9f8462d7459 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<article class="entry">
<a>
<aside>
<strong>Quadrant Homes</strong>
<p>Pacific Northwest Homebuilder</p>
</aside>
<img src="http://i.imgur.com/lIkWmas.png"/>
<i></i>
</a>
<ul>
<li style="background-color:#246f41"></li><li style="background-color:#f57b20"></li><li style="background-color:#433e42"></li>
</ul>
</article>
<article class="entry">
<a>
<aside>
<strong>Ossia</strong>
<p>Creators of Cota Wireless Energy</p>
</aside>
<img src="http://i.imgur.com/OzLBARg.jpg"/>
<i></i>
</a>
<ul>
<li style="background-color:#8dcf0a"></li><li style="background-color:#5a9619"></li><li style="background-color:#2c2c2c"></li>
</ul>
</article>
<article class="entry">
<a>
<aside>
<strong>Clarity Signs</strong>
<p>Kenmore Based Sign Shop</p>
</aside>
<img src="http://i.imgur.com/jUW32np.jpg"/>
<i></i>
</a>
<ul>
<li style="background-color:#d4132e"></li><li style="background-color:#282627"></li><li style="background-color:#7c7c7c"></li>
</ul>
</article>
<article class="entry">
<a>
<aside>
<strong>Maddock &amp; Associates</strong>
<p>Tacoma Based Insurance Broker</p>
</aside>
<img src="http://i.imgur.com/Jc1nXxx.jpg"/>
<i></i>
</a>
<ul>
<li style="background-color:#0084be"></li><li style="background-color:#014c71"></li><li style="background-color:#329e00"></li>
</ul>
</article>
<article class="entry">
<a>
<aside>
<strong>Smart Office Environments</strong>
<p>Office Furniture</p>
</aside>
<img src="http://i.imgur.com/U0Mr5kU.jpg"/>
<i></i>
</a>
<ul>
<li style="background-color:#ecce00"></li><li style="background-color:#333333"></li><li style="background-color:#cccccc"></li>
</ul>
</article>
<article class="entry">
<a>
<aside>
<strong>Cardiac Science</strong>
<p>International Defibrillators</p>
</aside>
<img src="http://i.imgur.com/7tndqyT.jpg"/>
<i></i>
</a>
<ul>
<li style="background-color:#ffa43f"></li><li style="background-color:#afbc22"></li><li style="background-color:#3c8dce"></li>
</ul>
</article>
<article class="entry">
<a>
<aside>
<strong>Brennan Heating</strong>
<p>Seattle Heating &amp; Air Conditioning</p>
</aside>
<img src="https://i.imgur.com/xz4mBfi.jpg"/>
<i></i>
</a>
<ul>
<li style="background-color:#d43254"></li><li style="background-color:#2f5fac"></li><li style="background-color:#57aeff"></li>
</ul>
</article>
<article class="entry">
<a>
<aside>
<strong>Divers Institute</strong>
<p>Seattle Diving School</p>
</aside>
<img src="https://i.imgur.com/b3uXhJH.jpg"/>
<i></i>
</a>
<ul>
<li style="background-color:#2b8dbd"></li><li style="background-color:#264c5f"></li><li style="background-color:#f36000"></li>
</ul>
</article>
<article class="entry">
<a>
<aside>
<strong>Evoke Modern</strong>
<p>Pacific Northwest Modern Homes</p>
</aside>
<img src="https://i.imgur.com/tecOxxA.jpg"/>
<i></i>
</a>
<ul>
<li style="background-color:#cecccf"></li><li style="background-color:#6581a0"></li><li style="background-color:#272425"></li>
</ul>
</article>
<!--Typekit-->
<script type="text/javascript" src="//use.typekit.net/wyr7rug.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
Raw
Project-Selector.markdown
Raw
script.js
$(document).ready(function(){
$('.entry').hover(function(){
var li = $('li', this);
for(var i = 0; i < $(li).length; i++){
$($(li)[i]).stop().animate({
'height':'18px'
}, 300 + (i * 150));
}
}, function(){
$('li', this).stop().animate({
'height':'5px'
}, 250);
});
});
Raw
style.scss
@import "compass/css3";
body{
background-color:#f0f0f0;
}
.entry{
position:relative;
width:300px;
height:200px;
background: white;
margin:15px;
overflow:hidden;
float:left;
box-shadow: 0px 3px 8px rgba(0,0,0,.15);
&:hover{
img{
right:0px;
top:-5px;
@include scale(.9);
}
aside{
left:-125px;
transition: all 0.75s ease;
opacity:0;
}
i{
left:110px;
opacity:1;
@include scale(.7);
}
}
i{
border-radius:100%;
background-color:rgba(0,0,0,.4);
width:80px;
height:80px;
display:block;
position:absolute;
left:260px;
top:48px;
text-align:center;
line-height:72px;
color:white;
font-family:"effra";
font-size:100px;
font-weight:bold;
opacity:0;
transition: all 0.5s ease;
@include scale(1);
}
i:after{
content:'+';
}
aside{
width:100px;
padding:65px 25px 30px 25px;
z-index:100;
position:relative;
left:0px;
transition: all 0.5s ease;
}
strong{
font-family: "effra";
text-transform:uppercase;
font-weight:bold;
font-size:16px;
line-height:14px;
color:#333;
}
p{
font-family: "proxima-nova";
font-size:13px;
margin-top:20px;
color:#666;
}
a{
&:hover{
cursor:pointer;
}
display:block;
width:inherit;height:inherit;
img{
position:absolute;
top:0px;
right:-125px;
transition: all 0.5s ease;
}
}
ul{
position:absolute;
display:block;
bottom:-5px;
width:inherit;
}
li{
display:inline-block;
height:5px;
width:100px;
background-color:red;
overflow:hidden;
bottom:0px;
position:relative;
bottom:0px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment