CodePen

HTML

            
                  <header>
    <a href="http://codepen.io/atelierbram/pen/Ipzhi" class="header__link"><h1 class="page-title">Custom Thumbnails</h1><h2 class="tagline">+ CSS-clip-property in &#8220;focalpoint grid&#8221;</h2></a>

    </header> 

    <section class="blogroll-section"> 

    <article class="post-excerpt">
    <h2 class="post-excerpt__title"><a href="#" class="post-excerpt__link">Attention Grabbing Blog Post Title 01</a></h2>
    <a href="#" class="thumb"><img src="https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png" alt="img" /></a>
    <div class="post-excerpt__entry">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus &hellip;</p>

    </div><!-- \.post-excerpt__entry -->
    </article><!-- \article .post-excerpt -->      

    <article class="post-excerpt">
    <h2 class="post-excerpt__title"><a href="#" class="post-excerpt__link">Attention Grabbing Blog Post Title 02</a></h2>
    <a href="#" class="thumb thumb--04x-04y"><img src="https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png" alt="img" /></a>
    <div class="post-excerpt__entry">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus &hellip;</p>

    </div><!-- \.post-excerpt__entry -->
    </article><!-- \article .post-excerpt -->      

    <article class="post-excerpt">
    <h2 class="post-excerpt__title"><a href="#" class="post-excerpt__link">Attention Grabbing Blog Post Title 03</a></h2>
    <a href="#" class="thumb thumb--08x-08y"><img src="https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png" alt="img" /></a>
    <div class="post-excerpt__entry">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus &hellip;</p>

    </div><!-- \.post-excerpt__entry -->
    </article><!-- \article .post-excerpt -->      

    <article class="post-excerpt">
    <h2 class="post-excerpt__title"><a href="#" class="post-excerpt__link">Attention Grabbing Blog Post Title 04</a></h2>
    <a href="#" class="thumb thumb--12x-12y"><img src="https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png" alt="img" /></a>
    <div class="post-excerpt__entry">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus &hellip;</p>

    </div><!-- \.post-excerpt__entry -->
    </article><!-- \article .post-excerpt -->      

    <article class="post-excerpt">
    <h2 class="post-excerpt__title"><a href="#" class="post-excerpt__link">Attention Grabbing Blog Post Title 05</a></h2>
    <a href="#" class="thumb thumb--04x-00y"><img src="https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png" alt="img" /></a>
    <div class="post-excerpt__entry">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus &hellip;</p>

    </div><!-- \.post-excerpt__entry -->
    </article><!-- \article .post-excerpt -->      

    <article class="post-excerpt">
    <h2 class="post-excerpt__title"><a href="#" class="post-excerpt__link">Attention Grabbing Blog Post Title 06</a></h2>
    <a href="#" class="thumb thumb--08x-00y"><img src="https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png" alt="img" /></a>
    <div class="post-excerpt__entry">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus &hellip;</p>

    </div><!-- \.post-excerpt__entry -->
    </article><!-- \article .post-excerpt -->      

    <article class="post-excerpt">
    <h2 class="post-excerpt__title"><a href="#" class="post-excerpt__link">Attention Grabbing Blog Post Title 07</a></h2>
    <a href="#" class="thumb thumb--12x-00y"><img src="https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png" alt="img" /></a>
    <div class="post-excerpt__entry">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus &hellip;</p>

    </div><!-- \.post-excerpt__entry -->
    </article><!-- \article .post-excerpt -->      

    <article class="post-excerpt">
    <h2 class="post-excerpt__title"><a href="#" class="post-excerpt__link">Attention Grabbing Blog Post Title 08</a></h2>
    <a href="#" class="thumb thumb--01x-00y"><img src="https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png" alt="img" /></a>
    <div class="post-excerpt__entry">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus &hellip;</p>

    </div><!-- \.post-excerpt__entry -->
    </article><!-- \article .post-excerpt -->      


    </section> 

    <footer>
    <small><a href="http://codepen.io/atelierbram/pen/Ipzhi" class="footer__link">2013 &middot; atelierbram</a></small>
    </footer> 
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * { 
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; 
  /* outline: 1px dotted salmon; */
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; 
} 
html { 
  background: #444 url(https://lh4.googleusercontent.com/-spN-XDONTiY/UOtRrrUms5I/AAAAAAAAAUQ/05bUqgS6Bo4/s800/thumb-focalpoint-grid-640x640.png); 
}
body,
.header__link,
.footer__link {
  background-color: #444; 
}
body { 
  font: 100%/1.375 sans-serif;
  background-color: rgba(0,0,0,.75); 
  padding-bottom: 1em;
}

a {
  display: inline-block;
  text-decoration: none; 
}
a:hover {
  background-color: #666; 
  color: white; 
} 
header,
section,
footer { 
  margin-left: auto;
  margin-right: auto;
  max-width: 48em;
  min-width: 32em; 
  /* outline: 1px dotted green; */
}
section, 
.post-excerpt,
.post-excerpt__title { 
  overflow: hidden; 
  background-color: white; 
  color: #111; 
} 
.page-title,
.tagline {
  padding-left: 2.5%;
  padding-right: 2.5%;
}
.page-title {
  font-size: 1.5em;
} 
.tagline {
  font-size: 1.125em;
} 
.header__link ,
.footer__link {
  width: 100%;
  color: #fff;
}
.footer__link {
  padding: 1em 0;
  text-align: center; 
  letter-spacing: 1px;
  word-spacing: -1px; 
}
.post-excerpt {
  position: relative;
  margin: 2em 2.5% 0; 
  min-height: 256px;
  /* outline: 1px dotted dimgrey;   */
}

.post-excerpt__title {
  font-size: 1.5em;
  min-height: 48px;
}
.post-excerpt__link { 
  padding: .25em .25em .4em .25em;
  color: #666; 
}
.post-excerpt__entry {
  margin-left: 144px; 
}
/* thumbnails */
.thumb { 
  width: 128px; 
  height: 128px; 
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 48px;
  margin-left: 0;
  padding: 0;
  z-index: 1;
  clip: rect(0, 128px, 128px, 0); 
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; 
}

.post-excerpt .thumb:hover {
  clip: rect(0, 256px, 256px, 0);
  cursor: pointer;
  z-index: 999;
  margin-top: 0;
}

.thumb img { 
  /* display:block;  */
  /* width: auto;  */
  /* height: auto;  */ 
}

.thumb--01x-00y { 
  clip: rect(0, 160px, 128px, 32px); 
}
.thumb--02x-00y { 
  clip: rect(0, 192px, 128px, 64px); 
}
.thumb--03x-00y { 
  clip: rect(0, 224px, 128px, 96px); 
} 
.thumb--04x-00y { 
  clip: rect(0, 256px, 128px, 128px); 
}
.thumb--05x-00y { 
  clip: rect(0, 288px, 128px, 160px); 
} 
.thumb--06x-00y { 
  clip: rect(0, 320px, 128px, 192px); 
} 
.thumb--07x-00y { 
  clip: rect(0, 352px, 128px, 224px); 
} 
.thumb--08x-00y { 
  clip: rect(0, 384px, 128px, 256px); 
} 
.thumb--09x-00y { 
  clip: rect(0, 416px, 128px, 288px); 
} 
.thumb--10x-00y { 
  clip: rect(0, 448px, 128px, 320px); 
} 
.thumb--11x-00y { 
  clip: rect(0, 480px, 128px, 352px); 
} 
.thumb--12x-00y { 
  clip: rect(0, 512px, 128px, 384px); 
}
.thumb--13x-00y { 
  clip: rect(0, 544px, 128px, 416px); 
}
.thumb--14x-00y { 
  clip: rect(0, 576px, 128px, 448px); 
}
.thumb--15x-00y { 
  clip: rect(0, 608px, 128px, 480px); 
}
.thumb--16x-00y { 
  clip: rect(0, 640px, 128px, 512px); 
} 
.thumb--01x-01y { 
  clip: rect(32px, 160px, 160px, 32px); 
}
.thumb--02x-01y { 
  clip: rect(32px, 192px, 160px, 64px); 
}
.thumb--03x-01y { 
  clip: rect(32px, 224px, 160px, 96px); 
} 
.thumb--04x-01y { 
  clip: rect(32px, 256px, 160px, 128px); 
}
.thumb--05x-01y { 
  clip: rect(32px, 288px, 160px, 160px); 
} 
.thumb--06x-01y { 
  clip: rect(32px, 320px, 160px, 192px); 
} 
.thumb--07x-01y { 
  clip: rect(32px, 352px, 160px, 224px); 
} 
.thumb--08x-01y { 
  clip: rect(32px, 384px, 160px, 256px); 
} 
.thumb--09x-01y { 
  clip: rect(32px, 416px, 160px, 288px); 
} 
.thumb--10x-01y { 
  clip: rect(32px, 448px, 160px, 320px); 
} 
.thumb--11x-01y { 
  clip: rect(32px, 480px, 160px, 352px); 
} 
.thumb--12x-01y { 
  clip: rect(32px, 512px, 160px, 384px); 
}
.thumb--13x-01y { 
  clip: rect(32px, 544px, 160px, 416px); 
}
.thumb--14x-01y { 
  clip: rect(32px, 576px, 160px, 448px); 
}
.thumb--15x-01y { 
  clip: rect(32px, 608px, 160px, 480px); 
}
.thumb--16x-01y { 
  clip: rect(32px, 640px, 160px, 512px); 
} 
.thumb--01x-02y { 
  clip: rect(64px, 160px, 192px, 32px); 
}                         
.thumb--02x-02y {         
  clip: rect(64px, 192px, 192px, 64px); 
}                         
.thumb--03x-02y {         
  clip: rect(64px, 224px, 192px, 96px); 
}                         
.thumb--04x-02y {         
  clip: rect(64px, 256px, 192px, 128px); 
}                         
.thumb--05x-02y {         
  clip: rect(64px, 288px, 192px, 160px); 
}                         
.thumb--06x-02y {         
  clip: rect(64px, 320px, 192px, 192px); 
}                         
.thumb--07x-02y {         
  clip: rect(64px, 352px, 192px, 224px); 
}                         
.thumb--08x-02y {         
  clip: rect(64px, 384px, 192px, 256px); 
}                         
.thumb--09x-02y {         
  clip: rect(64px, 416px, 192px, 288px); 
}                         
.thumb--10x-02y {         
  clip: rect(64px, 448px, 192px, 320px); 
}                         
.thumb--11x-02y {         
  clip: rect(64px, 480px, 192px, 352px); 
}                         
.thumb--12x-02y {         
  clip: rect(64px, 512px, 192px, 384px); 
}                         
.thumb--13x-02y {         
  clip: rect(64px, 544px, 192px, 416px); 
}                         
.thumb--14x-02y {         
  clip: rect(64px, 576px, 192px, 448px); 
}                         
.thumb--15x-02y {         
  clip: rect(64px, 608px, 192px, 480px); 
}                         
.thumb--16x-02y {         
  clip: rect(64px, 640px, 192px, 512px); 
} 
.thumb--01x-03y { 
  clip: rect(96px, 160px, 224px, 32px); 
}                         
.thumb--02x-03y {         
  clip: rect(96px, 192px, 224px, 64px); 
}                         
.thumb--03x-03y {         
  clip: rect(96px, 224px, 224px, 96px); 
}                         
.thumb--04x-03y {         
  clip: rect(96px, 256px, 224px, 128px); 
}                         
.thumb--05x-03y {         
  clip: rect(96px, 288px, 224px, 160px); 
}                         
.thumb--06x-03y {         
  clip: rect(96px, 320px, 224px, 192px); 
}                         
.thumb--07x-03y {         
  clip: rect(96px, 352px, 224px, 224px); 
}                         
.thumb--08x-03y {         
  clip: rect(96px, 384px, 224px, 256px); 
}                         
.thumb--09x-03y {         
  clip: rect(96px, 416px, 224px, 288px); 
}                         
.thumb--10x-03y {         
  clip: rect(96px, 448px, 224px, 320px); 
}                         
.thumb--11x-03y {         
  clip: rect(96px, 480px, 224px, 352px); 
}                         
.thumb--12x-03y {         
  clip: rect(96px, 512px, 224px, 384px); 
}                         
.thumb--13x-03y {         
  clip: rect(96px, 544px, 224px, 416px); 
}                         
.thumb--14x-03y {         
  clip: rect(96px, 576px, 224px, 448px); 
}                         
.thumb--15x-03y {         
  clip: rect(96px, 608px, 224px, 480px); 
}                         
.thumb--16x-03y {         
  clip: rect(96px, 640px, 224px, 512px); 
} 
.thumb--01x-04y { 
  clip: rect(128px, 160px, 256px, 32px); 
}                          
.thumb--02x-04y {          
  clip: rect(128px, 192px, 256px, 64px); 
}                          
.thumb--03x-04y {          
  clip: rect(128px, 224px, 256px, 96px); 
}                          
.thumb--04x-04y {          
  clip: rect(128px, 256px, 256px, 128px); 
}                          
.thumb--05x-04y {          
  clip: rect(128px, 288px, 256px, 160px); 
}                          
.thumb--06x-04y {          
  clip: rect(128px, 320px, 256px, 192px); 
}                          
.thumb--07x-04y {          
  clip: rect(128px, 352px, 256px, 224px); 
}                          
.thumb--08x-04y {          
  clip: rect(128px, 384px, 256px, 256px); 
}                          
.thumb--09x-04y {          
  clip: rect(128px, 416px, 256px, 288px); 
}                          
.thumb--10x-04y {          
  clip: rect(128px, 448px, 256px, 320px); 
}                          
.thumb--11x-04y {          
  clip: rect(128px, 480px, 256px, 352px); 
}                          
.thumb--12x-04y {          
  clip: rect(128px, 512px, 256px, 384px); 
}                          
.thumb--13x-04y {          
  clip: rect(128px, 544px, 256px, 416px); 
}                          
.thumb--14x-04y {          
  clip: rect(128px, 576px, 256px, 448px); 
}                          
.thumb--15x-04y {          
  clip: rect(128px, 608px, 256px, 480px); 
}                          
.thumb--16x-04y {          
  clip: rect(128px, 640px, 256px, 512px); 
} 
.thumb--01x-05y { 
  clip: rect(160px, 160px, 288px, 32px); 
}                          
.thumb--02x-05y {          
  clip: rect(160px, 192px, 288px, 64px); 
}                          
.thumb--03x-05y {          
  clip: rect(160px, 224px, 288px, 96px); 
}                          
.thumb--04x-05y {          
  clip: rect(160px, 256px, 288px, 128px); 
}                          
.thumb--05x-05y {          
  clip: rect(160px, 288px, 288px, 160px); 
}                          
.thumb--06x-05y {          
  clip: rect(160px, 320px, 288px, 192px); 
}                          
.thumb--07x-05y {          
  clip: rect(160px, 352px, 288px, 224px); 
}                          
.thumb--08x-05y {          
  clip: rect(160px, 384px, 288px, 256px); 
}                          
.thumb--09x-05y {          
  clip: rect(160px, 416px, 288px, 288px); 
}                          
.thumb--10x-05y {          
  clip: rect(160px, 448px, 288px, 320px); 
}                          
.thumb--11x-05y {          
  clip: rect(160px, 480px, 288px, 352px); 
}                          
.thumb--12x-05y {          
  clip: rect(160px, 512px, 288px, 384px); 
}                          
.thumb--13x-05y {          
  clip: rect(160px, 544px, 288px, 416px); 
}                          
.thumb--14x-05y {          
  clip: rect(160px, 576px, 288px, 448px); 
}                          
.thumb--15x-05y {          
  clip: rect(160px, 608px, 288px, 480px); 
}                          
.thumb--16x-05y {          
  clip: rect(160px, 640px, 288px, 512px); 
} 
.thumb--01x-06y { 
  clip: rect(192px, 160px, 320px, 32px); 
}                          
.thumb--02x-06y {          
  clip: rect(192px, 192px, 320px, 64px); 
}                          
.thumb--03x-06y {          
  clip: rect(192px, 224px, 320px, 96px); 
}                          
.thumb--04x-06y {          
  clip: rect(192px, 256px, 320px, 128px); 
}                          
.thumb--05x-06y {          
  clip: rect(192px, 288px, 320px, 160px); 
}                          
.thumb--06x-06y {          
  clip: rect(192px, 320px, 320px, 192px); 
}                          
.thumb--07x-06y {          
  clip: rect(192px, 352px, 320px, 224px); 
}                          
.thumb--08x-06y {          
  clip: rect(192px, 384px, 320px, 256px); 
}                          
.thumb--09x-06y {          
  clip: rect(192px, 416px, 320px, 288px); 
}                          
.thumb--10x-06y {          
  clip: rect(192px, 448px, 320px, 320px); 
}                          
.thumb--11x-06y {          
  clip: rect(192px, 480px, 320px, 352px); 
}                          
.thumb--12x-06y {          
  clip: rect(192px, 512px, 320px, 384px); 
}                          
.thumb--13x-06y {          
  clip: rect(192px, 544px, 320px, 416px); 
}                          
.thumb--14x-06y {          
  clip: rect(192px, 576px, 320px, 448px); 
}                          
.thumb--15x-06y {          
  clip: rect(192px, 608px, 320px, 480px); 
}                          
.thumb--16x-06y {          
  clip: rect(192px, 640px, 320px, 512px); 
} 
.thumb--01x-07y { 
  clip: rect(224px, 160px, 352px, 32px); 
}                          
.thumb--02x-07y {          
  clip: rect(224px, 192px, 352px, 64px); 
}                          
.thumb--03x-07y {          
  clip: rect(224px, 224px, 352px, 96px); 
}                          
.thumb--04x-07y {          
  clip: rect(224px, 256px, 352px, 128px); 
}                          
.thumb--05x-07y {          
  clip: rect(224px, 288px, 352px, 160px); 
}                          
.thumb--06x-07y {          
  clip: rect(224px, 320px, 352px, 192px); 
}                          
.thumb--07x-07y {          
  clip: rect(224px, 352px, 352px, 224px); 
}                          
.thumb--08x-07y {          
  clip: rect(224px, 384px, 352px, 256px); 
}                          
.thumb--09x-07y {          
  clip: rect(224px, 416px, 352px, 288px); 
}                          
.thumb--10x-07y {          
  clip: rect(224px, 448px, 352px, 320px); 
}                          
.thumb--11x-07y {          
  clip: rect(224px, 480px, 352px, 352px); 
}                          
.thumb--12x-07y {          
  clip: rect(224px, 512px, 352px, 384px); 
}                          
.thumb--13x-07y {          
  clip: rect(224px, 544px, 352px, 416px); 
}                          
.thumb--14x-07y {          
  clip: rect(224px, 576px, 352px, 448px); 
}                          
.thumb--15x-07y {          
  clip: rect(224px, 608px, 352px, 480px); 
}                          
.thumb--16x-07y {          
  clip: rect(224px, 640px, 352px, 512px); 
}                          
.thumb--01x-08y { 
  clip: rect(256px, 160px, 384px, 32px); 
}                          
.thumb--02x-08y {          
  clip: rect(256px, 192px, 384px, 64px); 
}                          
.thumb--03x-08y {          
  clip: rect(256px, 224px, 384px, 96px); 
}                          
.thumb--04x-08y {          
  clip: rect(256px, 256px, 384px, 128px); 
}                          
.thumb--05x-08y {          
  clip: rect(256px, 288px, 384px, 160px); 
}                          
.thumb--06x-08y {          
  clip: rect(256px, 320px, 384px, 192px); 
}                          
.thumb--07x-08y {          
  clip: rect(256px, 352px, 384px, 224px); 
}                          
.thumb--08x-08y {          
  clip: rect(256px, 384px, 384px, 256px); 
}                          
.thumb--09x-08y {          
  clip: rect(256px, 416px, 384px, 288px); 
}                          
.thumb--10x-08y {          
  clip: rect(256px, 448px, 384px, 320px); 
}                          
.thumb--11x-08y {          
  clip: rect(256px, 480px, 384px, 352px); 
}                          
.thumb--12x-08y {          
  clip: rect(256px, 512px, 384px, 384px); 
}                          
.thumb--13x-08y {          
  clip: rect(256px, 544px, 384px, 416px); 
}                          
.thumb--14x-08y {          
  clip: rect(256px, 576px, 384px, 448px); 
}                          
.thumb--15x-08y {          
  clip: rect(256px, 608px, 384px, 480px); 
}                          
.thumb--16x-08y {          
  clip: rect(256px, 640px, 384px, 512px); 
}                          
.thumb--01x-09y { 
  clip: rect(288px, 160px, 416px, 32px); 
}                          
.thumb--02x-09y {          
  clip: rect(288px, 192px, 416px, 64px); 
}                          
.thumb--03x-09y {          
  clip: rect(288px, 224px, 416px, 96px); 
}                          
.thumb--04x-09y {          
  clip: rect(288px, 256px, 416px, 128px); 
}                          
.thumb--05x-09y {          
  clip: rect(288px, 288px, 416px, 160px); 
}                          
.thumb--06x-09y {          
  clip: rect(288px, 320px, 416px, 192px); 
}                          
.thumb--07x-09y {          
  clip: rect(288px, 352px, 416px, 224px); 
}                          
.thumb--08x-09y {          
  clip: rect(288px, 384px, 416px, 256px); 
}                          
.thumb--09x-09y {          
  clip: rect(288px, 416px, 416px, 288px); 
}                          
.thumb--10x-09y {          
  clip: rect(288px, 448px, 416px, 320px); 
}                          
.thumb--11x-09y {          
  clip: rect(288px, 480px, 416px, 352px); 
}                          
.thumb--12x-09y {          
  clip: rect(288px, 512px, 416px, 384px); 
}                          
.thumb--13x-09y {          
  clip: rect(288px, 544px, 416px, 416px); 
}                          
.thumb--14x-09y {          
  clip: rect(288px, 576px, 416px, 448px); 
}                          
.thumb--15x-09y {          
  clip: rect(288px, 608px, 416px, 480px); 
}                          
.thumb--16x-09y {          
  clip: rect(288px, 640px, 416px, 512px); 
}                          
.thumb--01x-10y { 
  clip: rect(320px, 160px, 448px, 32px); 
}                          
.thumb--02x-10y {          
  clip: rect(320px, 192px, 448px, 64px); 
}                          
.thumb--03x-10y {          
  clip: rect(320px, 224px, 448px, 96px); 
}                          
.thumb--04x-10y {          
  clip: rect(320px, 256px, 448px, 128px); 
}                          
.thumb--05x-10y {          
  clip: rect(320px, 288px, 448px, 160px); 
}                          
.thumb--06x-10y {          
  clip: rect(320px, 320px, 448px, 192px); 
}                          
.thumb--07x-10y {          
  clip: rect(320px, 352px, 448px, 224px); 
}                          
.thumb--08x-10y {          
  clip: rect(320px, 384px, 448px, 256px); 
}                          
.thumb--09x-10y {          
  clip: rect(320px, 416px, 448px, 288px); 
}                          
.thumb--10x-10y {          
  clip: rect(320px, 448px, 448px, 320px); 
}                          
.thumb--11x-10y {          
  clip: rect(320px, 480px, 448px, 352px); 
}                          
.thumb--12x-10y {          
  clip: rect(320px, 512px, 448px, 384px); 
}                          
.thumb--13x-10y {          
  clip: rect(320px, 544px, 448px, 416px); 
}                          
.thumb--14x-10y {          
  clip: rect(320px, 576px, 448px, 448px); 
}                          
.thumb--15x-10y {          
  clip: rect(320px, 608px, 448px, 480px); 
}                          
.thumb--16x-10y {          
  clip: rect(320px, 640px, 448px, 512px); 
}                          
.thumb--01x-11y { 
  clip: rect(352px, 160px, 480px, 32px); 
}                          
.thumb--02x-11y {          
  clip: rect(352px, 192px, 480px, 64px); 
}                          
.thumb--03x-11y {          
  clip: rect(352px, 224px, 480px, 96px); 
}                          
.thumb--04x-11y {          
  clip: rect(352px, 256px, 480px, 128px); 
}                          
.thumb--05x-11y {          
  clip: rect(352px, 288px, 480px, 160px); 
}                          
.thumb--06x-11y {          
  clip: rect(352px, 320px, 480px, 192px); 
}                          
.thumb--07x-11y {          
  clip: rect(352px, 352px, 480px, 224px); 
}                          
.thumb--08x-11y {          
  clip: rect(352px, 384px, 480px, 256px); 
}                          
.thumb--09x-11y {          
  clip: rect(352px, 416px, 480px, 288px); 
}                          
.thumb--10x-11y {          
  clip: rect(352px, 448px, 480px, 320px); 
}                          
.thumb--11x-11y {          
  clip: rect(352px, 480px, 480px, 352px); 
}                          
.thumb--12x-11y {          
  clip: rect(352px, 512px, 480px, 384px); 
}                          
.thumb--13x-11y {          
  clip: rect(352px, 544px, 480px, 416px); 
}                          
.thumb--14x-11y {          
  clip: rect(352px, 576px, 480px, 448px); 
}                          
.thumb--15x-11y {          
  clip: rect(352px, 608px, 480px, 480px); 
}                          
.thumb--16x-11y {          
  clip: rect(352px, 640px, 480px, 512px); 
}                          
.thumb--01x-12y { 
  clip: rect(384px, 160px, 512px, 32px); 
}                          
.thumb--02x-12y {          
  clip: rect(384px, 192px, 512px, 64px); 
}                          
.thumb--03x-12y {          
  clip: rect(384px, 224px, 512px, 96px); 
}                          
.thumb--04x-12y {          
  clip: rect(384px, 256px, 512px, 128px); 
}                          
.thumb--05x-12y {          
  clip: rect(384px, 288px, 512px, 160px); 
}                          
.thumb--06x-12y {          
  clip: rect(384px, 320px, 512px, 192px); 
}                          
.thumb--07x-12y {          
  clip: rect(384px, 352px, 512px, 224px); 
}                          
.thumb--08x-12y {          
  clip: rect(384px, 384px, 512px, 256px); 
}                          
.thumb--09x-12y {          
  clip: rect(384px, 416px, 512px, 288px); 
}                          
.thumb--10x-12y {          
  clip: rect(384px, 448px, 512px, 320px); 
}                          
.thumb--11x-12y {          
  clip: rect(384px, 480px, 512px, 352px); 
}                          
.thumb--12x-12y {          
  clip: rect(384px, 512px, 512px, 384px); 
}                          
.thumb--13x-12y {          
  clip: rect(384px, 544px, 512px, 416px); 
}                          
.thumb--14x-12y {          
  clip: rect(384px, 576px, 512px, 448px); 
}                          
.thumb--15x-12y {          
  clip: rect(384px, 608px, 512px, 480px); 
}                          
.thumb--16x-12y {          
  clip: rect(384px, 640px, 512px, 512px); 
}                          
.thumb--01x-13y { 
  clip: rect(416px, 160px, 544px, 32px); 
}                          
.thumb--02x-13y {          
  clip: rect(416px, 192px, 544px, 64px); 
}                          
.thumb--03x-13y {          
  clip: rect(416px, 224px, 544px, 96px); 
}                          
.thumb--04x-13y {          
  clip: rect(416px, 256px, 544px, 128px); 
}                          
.thumb--05x-13y {          
  clip: rect(416px, 288px, 544px, 160px); 
}                          
.thumb--06x-13y {          
  clip: rect(416px, 320px, 544px, 192px); 
}                          
.thumb--07x-13y {          
  clip: rect(416px, 352px, 544px, 224px); 
}                          
.thumb--08x-13y {          
  clip: rect(416px, 384px, 544px, 256px); 
}                          
.thumb--09x-13y {          
  clip: rect(416px, 416px, 544px, 288px); 
}                          
.thumb--10x-13y {          
  clip: rect(416px, 448px, 544px, 320px); 
}                          
.thumb--11x-13y {          
  clip: rect(416px, 480px, 544px, 352px); 
}                          
.thumb--12x-13y {          
  clip: rect(416px, 512px, 544px, 384px); 
}                          
.thumb--13x-13y {          
  clip: rect(416px, 544px, 544px, 416px); 
}                          
.thumb--14x-13y {          
  clip: rect(416px, 576px, 544px, 448px); 
}                          
.thumb--15x-13y {          
  clip: rect(416px, 608px, 544px, 480px); 
}                          
.thumb--16x-13y {          
  clip: rect(416px, 640px, 544px, 512px); 
}                          
.thumb--01x-14y { 
  clip: rect(448px, 160px, 576px, 32px); 
}                          
.thumb--02x-14y {          
  clip: rect(448px, 192px, 576px, 64px); 
}                          
.thumb--03x-14y {          
  clip: rect(448px, 224px, 576px, 96px); 
}                          
.thumb--04x-14y {          
  clip: rect(448px, 256px, 576px, 128px); 
}                          
.thumb--05x-14y {          
  clip: rect(448px, 288px, 576px, 160px); 
}                          
.thumb--06x-14y {          
  clip: rect(448px, 320px, 576px, 192px); 
}                          
.thumb--07x-14y {          
  clip: rect(448px, 352px, 576px, 224px); 
}                          
.thumb--08x-14y {          
  clip: rect(448px, 384px, 576px, 256px); 
}                          
.thumb--09x-14y {          
  clip: rect(448px, 416px, 576px, 288px); 
}                          
.thumb--10x-14y {          
  clip: rect(448px, 448px, 576px, 320px); 
}                          
.thumb--11x-14y {          
  clip: rect(448px, 480px, 576px, 352px); 
}                          
.thumb--12x-14y {          
  clip: rect(448px, 512px, 576px, 384px); 
}                          
.thumb--13x-14y {          
  clip: rect(448px, 544px, 576px, 416px); 
}                          
.thumb--14x-14y {          
  clip: rect(448px, 576px, 576px, 448px); 
}                          
.thumb--15x-14y {          
  clip: rect(448px, 608px, 576px, 480px); 
}                          
.thumb--16x-14y {          
  clip: rect(448px, 640px, 576px, 512px); 
}                          
.thumb--01x-15y { 
  clip: rect(480px, 160px, 608px, 32px); 
}                          
.thumb--02x-15y {          
  clip: rect(480px, 192px, 608px, 64px); 
}                          
.thumb--03x-15y {          
  clip: rect(480px, 224px, 608px, 96px); 
}                          
.thumb--04x-15y {          
  clip: rect(480px, 256px, 608px, 128px); 
}                          
.thumb--05x-15y {          
  clip: rect(480px, 288px, 608px, 160px); 
}                          
.thumb--06x-15y {          
  clip: rect(480px, 320px, 608px, 192px); 
}                          
.thumb--07x-15y {          
  clip: rect(480px, 352px, 608px, 224px); 
}                          
.thumb--08x-15y {          
  clip: rect(480px, 384px, 608px, 256px); 
}                          
.thumb--09x-15y {          
  clip: rect(480px, 416px, 608px, 288px); 
}                          
.thumb--10x-15y {          
  clip: rect(480px, 448px, 608px, 320px); 
}                          
.thumb--11x-15y {          
  clip: rect(480px, 480px, 608px, 352px); 
}                          
.thumb--12x-15y {          
  clip: rect(480px, 512px, 608px, 384px); 
}                          
.thumb--13x-15y {          
  clip: rect(480px, 544px, 608px, 416px); 
}                          
.thumb--14x-15y {          
  clip: rect(480px, 576px, 608px, 448px); 
}                          
.thumb--15x-15y {          
  clip: rect(480px, 608px, 608px, 480px); 
}                          
.thumb--16x-15y {          
  clip: rect(480px, 640px, 608px, 512px); 
}                          
.thumb--01x-16y { 
  clip: rect(512px, 160px, 640px, 32px); 
}                           
.thumb--02x-16y {           
  clip: rect(512px, 192px, 640px, 64px); 
}                           
.thumb--03x-16y {           
  clip: rect(512px, 224px, 640px, 96px); 
}                           
.thumb--04x-16y {           
  clip: rect(512px, 256px, 640px, 128px); 
}                           
.thumb--05x-16y {           
  clip: rect(512px, 288px, 640px, 160px); 
}                           
.thumb--06x-16y {           
  clip: rect(512px, 320px, 640px, 192px); 
}                           
.thumb--07x-16y {           
  clip: rect(512px, 352px, 640px, 224px); 
}                           
.thumb--08x-16y {           
  clip: rect(512px, 384px, 640px, 256px); 
}                           
.thumb--09x-16y {           
  clip: rect(512px, 416px, 640px, 288px); 
}                           
.thumb--10x-16y {           
  clip: rect(512px, 448px, 640px, 320px); 
}                           
.thumb--11x-16y {           
  clip: rect(512px, 480px, 640px, 352px); 
}                           
.thumb--12x-16y {           
  clip: rect(512px, 512px, 640px, 384px); 
}                           
.thumb--13x-16y {           
  clip: rect(512px, 544px, 640px, 416px); 
}                           
.thumb--14x-16y {           
  clip: rect(512px, 576px, 640px, 448px); 
}                           
.thumb--15x-16y {           
  clip: rect(512px, 608px, 640px, 480px); 
}                           
.thumb--16x-16y {           
  clip: rect(512px, 640px, 640px, 512px); 
}                          

.post-excerpt .thumb--04x-00y:hover {
  clip: rect(0, 384px, 265px, 0);
}
.post-excerpt .thumb--04x-04y:hover {
  clip: rect(0, 384px, 384px, 0);
}
.post-excerpt .thumb--08x-08y:hover {
  clip: rect(0, 512px, 512px, 0);    
}

.post-excerpt .thumb--12x-12y:hover {
  clip: rect(0, 640px, 640px, 0);    
}

.post-excerpt .thumb--08x-00y:hover {
  clip: rect(0, 512px, 265px, 0);
}

.post-excerpt .thumb--12x-00y:hover {
  clip: rect(0, 640px, 265px, 0);
}


.post-excerpt [class*="01x"] {
  left: -32px;
}
.post-excerpt [class*="01y"] {
  top: -32px;
}
.post-excerpt [class*="02x"] {
  left: -64px;
}
.post-excerpt [class*="02y"] {
  top: -64px;
}
.post-excerpt [class*="03x"] {
  left: -96px;
}
.post-excerpt [class*="03y"] {
  top: -96px;
} 
.post-excerpt [class*="04x"] {
  left: -128px;
}
.post-excerpt [class*="04y"] {
  top: -128px;
}
.post-excerpt [class*="05x"] {
  left: -160px;
}
.post-excerpt [class*="05y"] {
  top: -160px;
}
.post-excerpt [class*="06x"] {
  left: -192px;
}
.post-excerpt [class*="06y"] {
  top: -192px;
}
.post-excerpt [class*="07x"] {
  left: -224px;
}
.post-excerpt [class*="07y"] {
  top: -224px;
} 
.post-excerpt [class*="08x"] {
  left: -256px;
}
.post-excerpt [class*="08y"] {
  top: -256px;
}
.post-excerpt [class*="09x"] {
  left: -288px;
}
.post-excerpt [class*="09y"] {
  top: -288px;
}
.post-excerpt [class*="10x"] {
  left: -320px;
}
.post-excerpt [class*="10y"] {
  top: -320px;
}
.post-excerpt [class*="11x"] {
  left: -352px;
}
.post-excerpt [class*="11y"] {
  top: -352px;
} 
.post-excerpt [class*="12x"] {
  left: -384px;
}
.post-excerpt [class*="12y"] {
  top: -384px;
}
.post-excerpt [class*="13x"] {
  left: -416px;
}
.post-excerpt [class*="13y"] {
  top: -416px;
}
.post-excerpt [class*="14x"] {
  left: -448px;
}
.post-excerpt [class*="14y"] {
  top: -448px;
}
.post-excerpt [class*="15x"] {
  left: -480px;
}
.post-excerpt [class*="15y"] {
  top: -480px; 
} 
.post-excerpt [class*="16x"] {
  left: -512px;
}
.post-excerpt [class*="16y"] {
  top: -512px;
}

@media only screen and (min-width:768px) {

  .post-excerpt__title {
    font-size: 2em;
    min-height: 64px;
  }
  .post-excerpt .thumb { 
    margin-top: 64px; 
  }
  .page-title {
    font-size: 2.5em;
  } 
  .tagline {
    font-size: 1.5em;
  }

}
 
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /**
inline image cropping demo for css-tricks forum question: 

http://css-tricks.com/forums/discussion/21580/how-to-make-custom-thumbnail-with-css#Item_11

This is a sequel to:
* http://codepen.io/atelierbram/pen/DplKs, which was forked from:
* http://codepen.io/derekfogge/pen/IlfwD

* TODO: hover states for all variations

# CSS clip property for Custom thumbnails (with "focalpoint grid-helper"):

clipped/cropped thumbnail size: 128px x 128px
original (grid-helper) image size: 640 x 640px

The grid is divided in 20 x 20 fields/grid-units, each grid-unit is 32px square.

## BENEFITS CSS CLIP PROPERTY FOR THUMBNAILS:
 * cool hover state
 * can - sort of - work as preloader for big images ( in combination with js - lazyloader perhaps? )

## DISADVANTAGES: 
 * rather inflexible: 
   * awkward in layout: element with clip property needs to have absolute positioning (and the position needs to be set every time again for different images/ different "focalpoints")
   * difficult to maintain: need to set clip property values for every single thumbnail in order to determine the 'focalpoint'. 

So maybe this demo and grid can help, but ...

## DISCLAIMER:
The limitations on the images dimensions that can be used with this grid are: 
 * should have same width and height, and be at least 128px square, and a multitude of 32px square, ( but really ideally same as here 640px square ), 
  
   * so also not that flexible, but maybe suitable for a edge use case. 

## RESOURCES:
 * http://css-tricks.com/css-sprites-with-inline-images/ 
 * http://css-tricks.com/almanac/properties/c/clip/
 * https://developer.mozilla.org/en-US/docs/CSS/clip
 * http://www.impressivewebs.com/demo-files/css-clip-gallery/
 * http://jsbin.com/esused/1/edit
 * http://css-tricks.com/attribute-selectors/
 */

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................