3

I was actually wondering if it was possible to mask an image to a circular shape with the use of a single pseudo element, which is the image itself? Let's say it's a rectangle image (not square) and you want to have it masked to a circular shape, without the image being squeezed?

So you'd have:

HTML 

<img src="#" class="mask">

CSS

.mask {
  A lot of CSS possibilities, up to you
}

I know, with a parent div and using overflow:hidden & border-radius:50% it's possible, but can you do it without the use of a second pseudo element?

Update!

I've noticed that many users seem to think I'm only looking for the CSS code border-radius:50% to create circular shapes, but that's not it. The image should become a circular, not elliptical shape. You can simply use a width and height equal to each other, but then the image becomes squeezed. The answer should contain a none-squeezed image result

The requirement of the solution
- The image should be be a perfect circle, not elliptical
- The image should not be squeezed, no matter the original aspect ratio. Even if you'd use a panorama picture, you'd only see the middle part as an circular shape and the rest hidden.

Sander Schaeffer
  • 2,757
  • 7
  • 28
  • 58
  • what have you tried and do you have an example online within a fiddle or codepen ? – G-Cyrillus May 08 '14 at 15:15
  • I can't think of a way without wrapping the img in a span or similiar – James King May 08 '14 at 15:16
  • 2
    BTW pseudo elements can't be used on img tag http://stackoverflow.com/questions/7396469/why-dont-before-and-after-pseudo-elements-work-with-img-elements – web-tiki May 08 '14 at 15:17
  • 1
    For everyone posting answers, please make sure you note the part in the question where it is requested that this work on a rectangular image WITHOUT squeezing it. None of the current answers do that. – Blake Mann May 08 '14 at 15:22
  • @BlakeMann only the first posted answer squeezes the image because it sets a specific width/height. The others don't squeeze the image and keep it the natural height/width. – web-tiki May 08 '14 at 15:27
  • @web-tiki Yes, but they don't produce a circle when used on a rectangular image. – Blake Mann May 08 '14 at 15:27
  • Like many of you now seem to have noticed, the solution requires a perfect circle image, without it being squeezed. In my whole career, I haven't found a single item solution with pure CSS. Therefor my question. :) – Sander Schaeffer May 08 '14 at 15:29
  • @BlakeMann yes I have now understood the OPs real aim, I though circular shape included eleptic shapes I'm deleting my answer. – web-tiki May 08 '14 at 15:30
  • 1
    @web-tiki Still thanks for your thoughts! I wasn't clear enough. I've updated all. – Sander Schaeffer May 08 '14 at 15:32
  • Are you searching for a [CSS mask](http://caniuse.com/css-masks)? As noted by caniuse, it's WebKit-only, for SVG on Firefox and no IE. – FelipeAls May 08 '14 at 15:38

3 Answers3

2

If you can only use the img tag to produce a mask over itself, then the only work around i can think of is : DEMO

.mask {
    width: 0px;
    height: 0px;
    border-radius: 100%;
    background:url(http://placehold.it/300x400) center;/* define position to choose clipped area */
    padding:50px;/* this makes a 100px square, so a perfect circle can be made with border-radius */
}

If you can use a wrapper, it can keep the original space used by image and mask can be settled anywhere on top of it via coordonates. DEMO

Markup:

<div class="mask r150 top100 left150">
    <img src="http://placehold.it/300x400" />
</div>

CSS:

.mask {
    position:relative;
    overflow:hidden;
    display:inline-block;/* preserve display behavior of initila image to mask*/
    box-shadow:0 0 0 1px;/* show where i stands */
}
.mask img {
    display:block;/* a way to remove bottom gap*/
}
.mask:before {
    content:'';
    position:absolute;
    border-radius:100%;
    box-shadow:0 0 0 2000px white;
}
.r150:before {
    height:150px;
    width:150px;
}
.top100:before {
    top:100px; 
}
.left150:before {
    left:150px;
}

The use of extra classes can help you to tune different size and mask position.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Well, that's.. pretty clever! Do you think it would ever be possible without the use of `background:url`? Let's visualize a case where you can't use a parent item, just the image itself and an user, who hasn't access to the CSS, can only upload his profile picture. He couldn't edit the `background:url` CSS to match his profile pic URL, so what would've been his options? - Once again, not a real situation, but really checking out the possibilities ^^ – Sander Schaeffer May 08 '14 at 15:39
  • @SanderSchaeffer Users' image should be cropped to a square if he uploads it. Additionally, the system should care to insert the CSS, not the user. And the URL should probably stay the same, just the image contents have to change. – kelunik May 08 '14 at 15:54
  • @SanderSchaeffer Image stands both in html and css here , so if CSS is not applied, you have an unmask image. If you use a wrapper, you experiment something similar , but without reducing the space image initially needs. http://jsfiddle.net/8CuXQ/3/ (none of these deserve a point :) ? ) – G-Cyrillus May 08 '14 at 15:59
  • Hehe, I forgot that one! I often vote for every sufficient answer, but this one would deserve two if I could. :-) I wait a few days for accepting to hunt for different approaches, but this will be a close call. Thanks a lot! – Sander Schaeffer May 08 '14 at 16:02
  • It's okay, i'm curious too o see other approach , beside masking image straight on upload via a server script, i do not think of others. (webkit aside) – G-Cyrillus May 08 '14 at 16:06
0

Here Fiddle: http://jsfiddle.net/8CuXQ/

Something like this:

.mask {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}
Ani
  • 4,473
  • 4
  • 26
  • 31
  • The problem I'm facing, with the exact code as you've got there, is that images get squeezed, without the use of a parent element. Check http://jsfiddle.net/8CuXQ/1/ for an example. It's your fiddle, but with an actual image. :) – Sander Schaeffer May 08 '14 at 15:23
0

This question is nearly a decade old, but I was looking for the same capability and came across this article that seems to directly answer the OP's question.

https://www.webfx.com/blog/web-design/circular-images-css/

Their answer is as follows (I tweaked one of the hard-coded offset values slightly to select an area of interest in this public domain image):

.circular--landscape { display: inline-block; position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; } .circular--landscape img { width: auto; height: 100%; margin-left: -90px; }
<div class="circular--landscape"> <img src="https://3.bp.blogspot.com/-fedOyDjUayQ/UImafVhSpwI/AAAAAAAAAIM/SUDVxqzigkw/s1600/stock-graphics-vintage--58.jpg" />   </div>
Scott Bontrager
  • 1