CODEWITHSUNDEEP
cssimage-clipping
coolwine
coolwine

Reputation: 23

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.

Upvotes: 0

Views: 1232

Answers (1)

gummbahla
gummbahla

Reputation: 219

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)

Upvotes: 1

Related Questions