Image Blocks with hover Effects onto a page in Foundation 5

//Index.html page 

<div class="row">
  <div class="large-12 columns">
    <div class="large-3 columns">
        <a href="#" class="client"><img src="img/about-us.png"></a>
        </div>
        <div class="large-3 columns">
        <a href="#" class="client"><img src="img/about-us.png"></a>
        </div>
        <div class="large-3 columns">
        <a href="#" class="client"><img src="img/about-us.png"></a>
        </div>
        <div class="large-3 columns">
        <a href="#" class="client"><img src="img/about-us.png"></a>
        </div>
        <div class="large-3 columns">
        <a href="#" class="client"><img src="img/about-us.png"></a>
        </div>
        <div class="large-3 columns">
        <a href="#" class="client"><img src="img/about-us.png"></a>
        </div>
        <div class="large-3 columns">
        <a href="#" class="client"><img src="img/about-us.png"></a>
        </div>
        <div class="large-3 columns">
        <a href="#" class="client"><img src="img/about-us.png"></a>
        </div>
    </div>
  </div>





//Style.CSS Page


.client {

 margin:0 0px;
  filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
 opacity:0.5;
max-height: 65px;


}
.client:hover {
  filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
 opacity:1.0;
}