CSS to display photos in a custom image cutout

[bungalowmonkeys]

If I created a cutout image, with a transparent center, is it then possible to use css to have photos, or feature photos show up behind the cutout? And how would that be accomplished? An example of what I’m talking about is this

edited: or if there is a better way to accomplish this without needing the cutout image? Just want to avoid having to edit each photo before uploading it.

[Paulie_D]

You could use background-clip or a mask but both have pretty poor browser support at the moment.

I suppose you could just use border-radius as a fallback

https://css-tricks.com/clipping-masking-css/

[Shikkediel]

For some reason the pen won’t stop loading when I try to visit but that would indeed be a great solution.

Edit – might be tricky with positioning though.

[Shikkediel]

Seems to keep loading any way I try…

[Author]

Posts