CSS Techniques for Faux Image Cropping

Technique 1: Using clip property

Original image

Faux Image Cropping applied

Templatica is a membership based template club where you get full access to all templates in the css template gallery for a single and very affordable annual fee of $24!
Yup, that's right! All of this plus all of the templates released within one year from the day you join. No extra cost, no hidden fees!
You also have a possibility of purchasing a single template for as low as $5.

CSS

.crop{
 	float:left;
 	position:relative;
	width:150px;
	height:90px;
	border:1px solid #ccc;
	margin:.5em 10px .5em 0;
}
.crop p{
	margin:0;
	position:absolute;
	top:-20px;
	left:-55px;
	clip:rect(20px 205px 110px 55px);
}	

back to the article

Faux Image Cropping Techniques are brought to you by Css Globe and supported by Css Templates by Templatica