Show only content inside div's background image

Show only content inside div's background image

A div in which I would be sliding in images , I want the images to appear
in only a certain area of the div, say a triangle shaped area. The rest of
the div should just show whatever is underneath the div.
CSS:
#overlay {
width: 700px ;
height: 300px ;
position: absolute;
top: 50px;
left: 50px;
z-index: 100;
background: url("img/overlay.png");
background-repeat: no-repeat;
}
HTML:
<div class="boxcat" id="websitesbox">
<div id="overlay"></div>
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
Here I would be sliding in the images into overlay, BUT I don't want the
images to show up completely , instead just a part of the overlay div
should be covered in the image. Not sure If I am making any sense. If I am
is this possible ?
Thanks