Search code examples
htmlcsspsd

How can I achieve this transparency effect using css?

enter image description here

This design is created in photoshop and I'm trying to convert to html and css. I have a background image (with the green lights), an overlay with reduced opacity and some text with an icon positioned at the center. How can I attain the effect shown below in html and css?

Solution

  • Check here!

    Basically you can create a transparent round shape with a big white (or black) border!

    background: transparent;
border-radius: 50%;
border: 1000px solid rgba(0, 0, 0, 0.5);

    JSFiddle