CSS Techniques for Faux Image Cropping

Technique 1: Using negative margins

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;
	margin:.5em 10px .5em 0;
	overflow:hidden; /* this is important */
	border:1px solid #ccc;
	}
/* input values to crop the image */
.crop img{
	margin:-20px -15px -40px -55px;
	}

back to the article

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