html - After using CSS clip can I move the image to display a different section? -

i have used css clip property clip images. displays image top left corner. can move image displays center of image? have tried following style properties try , move images have been unsuccessful, top, left , margin. have searched on internet can find instructions on how use clip property. here code:

css

.clip {     position: relative;     height: 130px;     width: 200px;     border: solid 1px #ccc; } .clip img {     position: absolute;     clip: rect(10px 190px 120px 10px); } 

html

<ul id="galleries">   <li class="clip">     <a href="images/image_01.jpg" rel="lightbox">       <img src="images/image_01.jpg"/>     </a>   </li>   <li class="clip">     <a href="images/image_02.jpg" rel="lightbox">       <img src="images/image_02.jpg"/>     </a>   </li>   <li class="clip">     <a href="images/image_03.jpg" rel="lightbox">       <img src="images/image_03.jpg"/>     </a>   </li> </ul> 

here answer question. overflow hide space not want shown. placing position relative on img cause img show in middle or want it.

here jsfiddle

css

.clip {     position: relative;     overflow: hidden; /*** overflow hide out of size of box ***/     height: 130px;     width: 200px;     border: solid 1px #ccc; } .clip img {     position: relative; /*** position relative place img in center ***/     top: -50%;     left: -15%;  }