clip an image using CSS No.2

Original image vs clipped image

by jianmin chen

HTML

<body>
    <div>original image:</div>
    <div><img class="original" src="https://g86vqq-dm2305.files.1drv.com/y3mDwtR_vi_Gx2eqYoWheI05MmOzxe8lAll1e2WiEExMwLqmBe6vcr5N4OBF6QAgbt4Aa7ZzM_w1ghvtX5Qb-Yd_QhwzI6-MrjdjkxH2DE217PAfrShsuR7zXXs8oUk2mR0X2CmzKvPWIz5HDloaE75EY4K8I-OVwMVTYCTH3vwyd8?width=503&height=501&cropmode=none" /></div>
    <div>clip an image (500px x 500px) to get center part - 100px x 100px, text 13</div>
    <div class="SecondImage">
    <div class="clipzone">
        <!-- current folder: . 
             parent folder: ../
             
            -->
        
        <img class="clipped" id="imgClipped1" src="https://g86vqq-dm2305.files.1drv.com/y3mDwtR_vi_Gx2eqYoWheI05MmOzxe8lAll1e2WiEExMwLqmBe6vcr5N4OBF6QAgbt4Aa7ZzM_w1ghvtX5Qb-Yd_QhwzI6-MrjdjkxH2DE217PAfrShsuR7zXXs8oUk2mR0X2CmzKvPWIz5HDloaE75EY4K8I-OVwMVTYCTH3vwyd8?width=503&height=501&cropmode=none" /> 
    </div>
        </div>
</body>

CSS

body {
}

.original {
    width: 500px;
    height: 500px; 
}

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

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

.clipped
{
  position:absolute;
}