Clip an image using CSS NO.1

customize an image to help

HTML

<body>
    <div class="clipzone">
        <!-- blog:  http://juliachencoding.blogspot.ca/2016/08/clip-cropping-image-css-learning.html
             current folder: . 
             parent folder: ../
             
            -->
        
        <img class="clipped" id="image1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" /> 
    </div>
</body>

CSS

body {
}


img
{
  position:absolute;
  clip:rect(0px, 300px, 305px, 200px);   
  border-width: 1px; 
  padding:1px;
  border: 1px solid black; /* think 1 px*/ 
  margin-left: -200px; 
  margin-top: -202px;   
}

.clipzone
{
  position:relative;
  width:501px; 
  height:503px;
  overflow:hidden;
}

.clipped
{
  position:absolute;
}