CodePen

HTML

            
              <section>
  <p>cropped</p>
  <div class="thumbnail">
    <img src="http://i164.photobucket.com/albums/u25/sheffieldbleep/tDR/303/DSC_0106.jpg" />
  </div>
</section>



<section>
    <p>uncropped</p>
  <img src="http://i164.photobucket.com/albums/u25/sheffieldbleep/tDR/303/DSC_0106.jpg" />
</section>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body{
  min-width: 1440px;
  margin:20px 60px;
  background: #111 /* url('http://subtlepatterns.com/patterns/dark_stripes.png') */;
}

section {
  display: inline-block;
  vertical-align: top;
  margin: 0 20px;
  position: relative;
  min-width: 300px;
  min-height: 340px;
}

p {
  line-height: 9px;
  font-family: sans-serif;
  color: white;
  font-weight: bold;
  text-shadow: 0 1px 6px black;
}

/* 
  to control the size of the thumbnail and the cropping: adjust the clip propery values
*/
.thumbnail { 
  width: 300px; 
  height: 300px; 
  /* overflow: hidden; */
  position: absolute;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  z-index: 1;
  top: 0;
  left: -24px;
  margin-left: -100%;
  margin-top: -40px;
  clip: rect(80px, 624px, 380px, 324px);  
}

.thumbnail img { 
  width: auto; 
  height: auto; 
  /* margin: -80px -324px; */
}

.thumbnail:hover {
  clip: rect(80px, 924px, 680px, 324px);
  cursor: pointer;
  z-index: 999;
}
.thumbnail:active {
  clip: rect(80px, 924px, 680px, 324px);
  cursor: pointer;
  z-index: 999;
}
            
          
!
? ?
? ?
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_6

forked from: http://codepen.io/derekfogge/pen/IlfwD

## 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
 */


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