Advanced Search

Crop images with negative Margins

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 
  2.  
  3. .crop{
  4. 	float:left;
  5. 	margin:.5em 10px .5em 0;
  6. 	overflow:hidden; /* this is important */
  7. 	border:1px solid #ccc;
  8. 	}
  9. 	/* input values to crop the image: top, right, bottom, left */
  10. .crop img{
  11. 	margin:-20px -15px -40px -55px;
  12. 	}

URL: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.