CSS Techniques for Faux Image Cropping

Technique 1: Using absolute positioning

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 */
	position:relative; /* this is important too */
	border:1px solid #ccc;
	width:150px;
	height:90px;
	}
/* position the image using negative top and left values */
.crop img{
	position:absolute;
	top:-20px;
	left:-55px;
	}

back to the article

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