How to mix two image using clipping in css?

Question

I have two images link.

Original image -

Masking image -

Here is the result image.

How can i get the result like this?

I was finding some way using css - clip-path : rect(....) but I can't find using image mask.

You just want to use clipping? How about following an easier CSS approach to enclose the image in a container of circular shape? `border-radius: 50% and overflow: hidden;` — m4n0, Nov 05 '15 at 08:15
Thanks your advice. But there is many other shape. So I'll find another way to get the answer. — coolwine, Nov 05 '15 at 08:22

score 1 · Accepted Answer · answered Nov 05 '15 at 08:49

Make sure that the mask is a .png, where the grey part is transparent. Then, use it in the following way:

CSS: img{background-image: url('original_image');}

HTML: <img src="mask.png"/>

You might want to use some of the CSS background properties to align the original image in such a way that the correct part of it is shown (see http://www.w3schools.com/cssref/pr_background-position.asp)

1 Answers1