CODEWITHSUNDEEP
javascriptjqueryhtmlcss
eugeneK
eugeneK

Reputation: 11116

How to set half-opaque image above other image?

Well, i have to ask something complicated before i even start. I have a website on which there are facial images of workers. All images have rounded corners. I thought about idea that i can export image with fake rounded corners and opaque inside so photo of worker which is beneath can fit in.

Is there some way to do that?

Upvotes: 0

Views: 95

Answers (2)

Madara's Ghost
Madara's Ghost

Reputation: 174967

There are some ways of preforming what you want.

  1. you could use a div with width and height set, and then apply the rounded corners image on it.

  2. You could just use the border-radius property which has a very good modern browser support (with vendor prefixes), example:

    img.employee {
    border-radius: 10px;
}

Good luck ;)

Upvotes: 0

lamelas
lamelas

Reputation: 872

In case you really need to put an image on top of the other one, just use the z-index property:

<img src="border.png" alt="" style="position: absolute; z-index: 1;" /> 
<img src="worker_photo.png" alt="" />

In this case, the image "border.png" will show up over the "worker_photo.png". If they have the same size, it will look exactly like what you want. But for rounded corners the previous reply is better. :)

Upvotes: 2

Related Questions