hover over image effect: shadow

I want to add shadows behind images when hovered over to show which image is being highlighted. I am not sure what codes to use in CSS to make that effect. I tried to use the moz-box-shadowcommand but I am not quite sure if it the right way to go.

below are my codes:

<section class="pictures">
        <div class="container">
            <div class="row1">
                <div id="first" class="img1"> <a href="/img1"> <img src="images/page-1_img1.jpg"></a>
                </div>
                <div id="second" class="img2"> <a href="/img2"><img src="images/page-1_img2.jpg"></a>
                </div> 
            </div>
            <div class="row2">
                <div id="third" class="img3"> <a href="/img3"><img src="images/page-1_img3.jpg"></a>
                </div>
                <div id="fourth" class="img4"> <a href="/img4"><img src="images/page-1_img4.jpg"></a>
                </div>
                <div id="fifth" class="img5"> <a href="/img5"><img src="images/page-1_img5.jpg"></a>
                </div>
            </div>
        </div>
    </section>

CSS:

/Images/

.container {
    padding-top: 100px;
}

.row1 {
    display:inline;
}
.img1{
    float:left;
    padding-left: 20px;
}
.img2{
    float: right;
    padding-right: 60px;
}

.row2{
    display:inline;

}
.img3{
    float:left;
    padding-left: 20px;
    padding-top: 20px;

}
.img4{

 display: inline-block;
 padding-top: 20px;
 padding-left: 30px;

}

.img5{

    display: inline-block;
    padding-right: 20px;
    padding-left:20px;
}

.container a:hover{
    -moz-box-shadow: #000000;
    -webkit-box-shadow: #000000;
    box-shadow: #000000;
}

Thank you.

Your syntax for the box shadow is wrong. This should work for you.

.container a:hover {
  box-shadow: 10px 10px 5px #000000;
  -moz-box-shadow: 0px 10px 5px #000000;
  -webkit-box-shadow: 0px 10px 5px #000000;     
}