Is It Possible To Make Certain Parts Of An Image Transparent In Html5/css

I want to have an image on my page that has certain parts that are transparent, but not all of it. Is it possible to make just certain parts of an image/div transparent? For exampl

Solution 1:

Here is another CSS option. It simulates a transparent area within an image by sharing a fixed background with background-size:cover on both the background and the circle. This technique also creates interesting effects when used for other html elements that can have a background like divs, headers, paragraphs...

JSFiddle

Main CSS

.main-background, .circle-div {
    background-image:url(http://i.imgur.com/1aAo20a.jpg);
    background-repeat:no-repeat;
    background-position:center top;
    background-attachment:fixed;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
}

HTML

<divclass="main-background"><divclass="demo-holder"><imgclass="img-size"src="http://i.imgur.com/OaE8VAj.jpg" /><divclass="circle-div">Transparent<br />Effect</div></div></div>

Another suggestion would be to use the inline image as a background on "demo-holder".

Solution 2:

DEMO

Check this Demo, you can do by adding a span tag and give absolute position add opacity. and also you can increase the opacity. Hope this is the one you are looking for. :)

html :

<divclass="imgWrap"><imgsrc="https://www.google.co.in/images/srpr/logo11w.png" /><spanclass="tranparentClass"></span></div>

CSS:

.imgWrapimg{
    width:80%;
    height:80%;
    position:relative;
    border:1px solid #900;
}
.tranparentClass {
    opacity:.5;
    border:1px solid #f00;
    border-radius : 50%;
    display:block;
    padding:55px;
    position:absolute;
    top:0;
    left:0;
    background:#fff;

}