How to make my tiles of images to be in background as transparent

Question

I have created a group of images in a tiles format like 10 images in a row in a square box of 3 rows. Now i want my tiles of images to be in background and also be transparent. I want to place one more div element over the top of the tiles of images. for ex: I want my page to be like as : www.befunky.com

Where there are images arranged in tiles and over it a plain screen is present. The background tiles images are visible. I know they might have used an image for this but my requirement i want to do it using css.

My code is as follows:

          <div class="in-section">
            <div class="tiles tile1">
            </div>
            <div class="tiles tile2">
            </div>
            <div class="tiles tile3">
            </div>
            <div class="tiles tile4">
            </div>
            <div class="tiles tile5">
            </div>
            <div class="tiles tile6">
            </div>
            <div class="tiles tile7">
            </div>
            <div class="tiles tile8">
            </div>
            <div class="tiles tile9">
            </div>
            <div class="images">
            </div>
        </div>

My Css is:

 .in-section{
margin-top:10px;
height:470px;
width:470px;
background-color:red;
margin-left:380px;
  }


 .tiles{
height:150px;
width:150px;
background-color:grey;
float:left;
border: 1px solid green;    
 }

.tile1, .tile2, .tile3, .tile4, .tile5, .tile6, .tile7 , .tile8, .tile9{
    padding:2px;
    margin:3px;
 }

Answer 1

Add these CSS styles. Use z-index to send your images behind the in section div.

.tiles{
    position: relative;
    z-index: -50; 
}
.in-section{
    background-color:rgba(255,0,0,.8); //rgba color for red with some transparency.
};