A Pen by hamwithglasses.

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>

Project-Selector.markdown

Project Selector

A simple project/portfolio setup.

A Pen by hamwithglasses on CodePen.

License.

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);
 });
  
  
});

style.scss

@import "compass";
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;
  }
}