Simulating a Transparent Area on a Div or Image using CSS

by TalkingRock

HTML

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

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    border:0;
}
.main-background {
    min-width:100%;
    min-height:100%;
    margin:0;
    padding:0;
    border:0;
}
.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;
}
.demo-holder {
    position:relative;
    width:500px;
    height:auto;
    margin:0 auto;
}
.img-size {
    display:block;
    width:100%;
    height:auto;
}
.circle-div {
    position:absolute;
    top:10%;
    left:10%;
    border-radius:50%;
    border:3px solid #000000;
    padding:25px;
    text-align:center;
}