How to make image clipping in css

Question

I tried to make an clipping mask on css but I think I'm on a wrong track. Here is the image that im trying to convert to html..

now that I tried it on my end, it looks like a mess:

CSS:

.img_nav_individual {
    float: left;
    border: 3px solid #fff;
    margin-left: 8px;
    outline: 1px solid #c1cacf;
    max-width: 96px;
}

.img_nav_individual img { clip: rect(10px, 290px, 190px, 10px); }

HTML:

<div class="img_nav_individual"> <img src="img/parents1.png" />
  <div class="image_nav_text"> <span>parents</span> </div>
</div>

Suggestions are very much appreciated. Thanks!

Answer 1

You should use overflow:hidden; attribute on img_nav_individual. That will help here is your example : http://jsfiddle.net/6wPvW/

Answer 2

Either use overflow:hidden; on the outer element or set the image as a background image to achieve what you are after.

If you want to use clip, then the image needs to have position: absolute or position: fixed properties to work.

Answer 3

I believe after looking both the images that we need to do this

 <div class="img_nav_individual"> 
  <img src="img/parents1.png" align="right" />
  <div class="image_nav_text"> 
  <span>parents</span> </div>
 </div>

If you notice I have added align="right" to img tag

Answer 4

I know I should focus on code/technical. But I have a opinion, that why you not try crop these images before use it on html page? I think this way is simple and fast to go ahead!