Faux-Cropping Circles with CSS

Here’s a basic jsfiddle I made to illustrate how to crop an image with a CSS circle. Gone are the days of editing photos for this effect (thank goodness).

I’m using negative margins to faux-center the images. (Check back next week to see another method of cropping that doesn’t use negative margins!)

I’m hoping to expand on this fiddle to make a JavaScript function that will detect whether an image is vertical or horizontal and add the .vert class to the parent div of the vertical images.

Was this post helpful?