overlay on image without background

Question

how can I achieve something like in the image below. I have an image and I want to add a color overlay on the image but only on the image shape.

I tried to do something but I achieve overlay on all the div that holds the image... Like the image below:

Answer 1

Here is an idea using mask where the trick is to consider the same image as the mask layer and the overlay will be cut following the image shape

 .box { background:#fff; position:relative; width:200px; display:inline-block; -webkit-mask:url(https://i.ibb.co/2ngRVZQ/Daco-2761771.png) center/contain no-repeat; } img { display:block; max-width:100%; }.box:before { content:""; position:absolute; left:0; right:0; top:0; height:50%; /* adjust this */ background:rgba(255,0,0,0.5); } body { background:#f2f2f2; }

 <div class="box"> <img src="https://i.ibb.co/2ngRVZQ/Daco-2761771.png"> </div> <div class="box" style="width:100px;"> <img src="https://i.ibb.co/2ngRVZQ/Daco-2761771.png"> </div>

You can also optimize like below:

 .box { --img: url(https://i.ibb.co/2ngRVZQ/Daco-2761771.png); background: #fff; position: relative; width: 200px; display: inline-block; background: var(--img) center/contain no-repeat; -webkit-mask: var(--img) center/contain no-repeat; } img { display: block; max-width: 100%; }.box:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--h,50%); /* adjust this */ background: var(--c, rgba(255, 0, 0, 0.5)); }.box:after { content: ""; display: block; padding-top: 150%; /*maintain the same ratio (adjust based on your real image) */ } body { background: #f2f2f2; }

 <div class="box"></div> <div class="box" style="width:100px;--c:rgba(0,255,0,0.5);--img:url(https://i.ibb.co/3NVCq38/Daco-1325460.png);--h:70%"></div>