I purchased a theme and am trying to modify it so some images on homepage appear black and white and when you hover they return their color. Hovering over the image has no effect due to the z-index afaik.

```
.boxies {
   filter: url(filters.svg#grayscale); 
   filter: gray; 
   -webkit-filter: grayscale(1); 
}

.boxies:hover{
   filter: none;
   -webkit-filter: grayscale(0);
}

img{
   display: block;
   position: relative;
   width: 100%;
   z-index: 10; 
}

.front_holder {
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 24;
   opacity: 1;
   filter: alpha(opacity = 100);
   overflow: hidden;
   padding: 5px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transform: translateZ(0px);
}

<img src="relaxation.jpg" alt="" class="boxies">
<div class="front_holder">
   <a class="qbutton small" href="/manicure/" target="_self" style="background-color: transparent;height: 46px;line-height: 46px;">RELAXATION</a>
</div>

```

When I disable the z-index of "front\_holder" in the Chrome inspector, the image hover works as it should. You can see what is happening here: <http://itlive.ca/deleteme/> (the 6 images on the homepage). 

Any help would be greatly appreciated. Bob :)