cssimage-clipping

How to mix two image using clipping in css?

I have two images link.

Original image -

enter image description here

Masking image -

enter image description here

Here is the result image.

enter image description here

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.

Solution

  • 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"/>

    See an example here: http://codepen.io/anon/pen/pjOwpe

    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)