A CodePen by Tim Pietrusky. CodePen AwesomePI - A demo of the unoffical/fan made API for CodePen. http://github.com/TimPietrusky/codepen-awesomepi

index.html

<!--
  Demo application which uses the unoffical/fan made API for CodePen: CodePen AwesomePI

  http://github.com/TimPietrusky/codepen-awesomepi

  2012 by Tim Pietrusky
-->

<div id="pens">
  <h1>CodePen API (unoffical) in Action</h1>
</div

script.js

/*
 * Get the Editor's Picks from CodePen
 */
 
$(function() {
$.ajax({
    dataType: 'jsonp',
    jsonp: 'jsonp',
    url: 'http://codepen-awesomepi.timpietrusky.com/picks',
    success: function(data) {
      if (data.content != null) {
        start(data.content.pens);
      }
    }
});

/*
 * Create and show the iframes holding the pens
 */
function start(pens) {
  // Clear
  $('#pens').html('');

  // Create iframes
  $.each(pens, function(i, v) {
    var iframe_wrap = $('<div></div>');
    iframe_wrap.attr('class', 'iframe-wrap');

    var iframe = $('<iframe></iframe>');
    iframe.attr('frameborder', 0);
    iframe.attr('scrolling', 'no');
    iframe.attr('allowtransparency', 0);
    iframe.attr('class', 'iframe' + i);
    iframe.attr('src', this.url.fullgrid);

    // Need to do this otherwise the frames are added twice
    // A CodePen bug or a bug in my head?
    if ($('.iframe' + i).length == 0) {
      iframe.appendTo(iframe_wrap);
      iframe_wrap.appendTo('#pens');

      if (i != 0 && i % 4 == 0) {
        iframe_wrap.after('<div class="cf"></div>');
      }
    }
  });

  // Show iframes
  setTimeout(function() {
    $('#pens iframe').addClass('show');
  }, 250);
};
});

style.css

body {
  background:#444; 
  text-align:center;
}

h1 {
  font:4em "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
  
.iframe-wrap {
  position: relative;
  float:left;
  height:100px;
  width:100px;
  padding:2px;
  margin:5px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 2px -8px #222;
  border-radius:5px;
  border:2px solid #222;
  background:#222;
}

#pens iframe {
  width: 200%;
  height: 200%;
  border: 0;
  padding:0;
  background: white;
  transform-origin:top left;
  transform: scale(0.5);
  transition: opacity 0.3s ease;
  visibilty:hidden;
  opacity:0;
  overflow:hidden;
}

#pens iframe.show {
  visibilty:show;
  opacity:1;
}

.iframe-wrap:hover {
  width:400px;
  height:400px;
}

.cf:before, .cf:after {content:"";display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}